<template>
  <v-scale-screen width="100vw" height="100vh" fullscreen style="margin:0;padding:0;">
	<!-- <div ref="page" id="page"> -->
	<div ref="page" style="width:100%;height:100vh;position:relative;background-color:#fff;margin:0 auto;overflow:hidden;padding:0.1rem;padding-top:0;">
    <div  :class="isShow?'optionTree':'optionTreeHidden'" ref="optionTree">
			<div class="treeHead">
				<span style="font-size:0.3rem;color:#222;font-size:0.36rem;font-weight:700;">项目列表</span>
				<!-- <el-button type="success" size="mini" style="float:right;margin-top:0.1rem;margin-right:0.2rem;"
						@click="getProduct">刷新</el-button> -->
				<i class="el-icon-refresh  treeIcon" style="cursor: pointer;" @click="getProduct"></i>
				<!-- <i class="el-icon-back treeIcon" @click="isShow=false;"></i> -->
				<!-- <span style="display:inline-block;width:0.6rem;height:0.6rem;"> -->
				<!-- <i class="el-icon-office-building" style="color:#bbb;font-size:0.45rem;cursor:pointer;position:fixed;top:2px;left:-2px;z-index:10;" v-if="!isShow" @click="isShow=true;" ></i>		 -->
				<!-- </span> -->
			</div>
			<el-input style="width:94%;transform:translateY(-0.4rem);font-size:0.3rem;" placeholder="输入关键字进行项目过滤"
				v-model="filterText">
			</el-input>
			<!-- 如果要默认展开树的某一项加 :default-expanded-keys="defaultKey" -->
			<!-- 如果要默认展选中的某一项加 :default-checked-keys="defaultKey" -->
			<!-- <el-tree style="width:94%;transform: translateY(-0.3rem);color:#222;" ref="tree"  :data="options" :props="{'disabled':isDisable}" icon-class="el-icon-office-building"
					:filter-node-method="filterNode" node-key="id" :current-node-key="optionId" :highlight-current="true"  :check-on-click-node="true" :default-checked-keys="defaultKey" @node-click="handleNodeClick">
				</el-tree> -->
			<el-tree
				style="width:94%;transform: translateY(-0.2rem);color:#222;font-size:0.4rem!important;font-weight:700;"
				ref="tree" :data="options" icon-class="el-icon-office-building" :filter-node-method="filterNode"
				node-key="id" :current-node-key="optionId" :highlight-current="true" :check-on-click-node="true"
				:default-checked-keys="defaultKey" @node-click="handleNodeClick">
			</el-tree>
		</div>
		<div :class="isShow?'mainRight':'mainRightFull'" ref="mainRight">
			<el-tabs type="border-card" :before-leave="beforeLeave" class="tabsOption" ref="tabCard" v-model="topTab"
				@tab-click="mainClick">
				<el-tab-pane name="data" ref="data">
					<span slot="label"><i class="el-icon-monitor" style="margin-right: 3px;"></i>实时数据</span>
					<el-form v-model="form" inline
						style="text-align: left;height:1rem;line-height:1rem;border-bottom:2px solid #ccc;margin-top:0.1rem;">
						<el-form-item>
							<span style="font-size: 0.3rem;">设备:</span>
							<el-tooltip placement="top" :hide-after="after" effect="light">
								<div slot="content" style="line-height:0.4rem;">支持多选,可同时监控多个设备</div>
								<!-- <el-select v-model="form.device"  class="inpu" multiple collapse-tags  placeholder="" @change="changeDataDevice(form.device)"> -->
								<el-select v-model="form.device" class="inpu" multiple collapse-tags
									:placeholder="lookAll?'全部设备':''">
									<el-option class="oneOption" v-for="item in devices" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-tooltip>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="mini" @click="getManyLiveData(form.device)">监控已选</el-button>
							<el-button type="primary" size="mini" @click="getAllLiveData()">监控全部</el-button>
							<!-- <el-button type="primary" size="small" @click="refreshManyDeviceData(form.device)">刷新</el-button> -->
						</el-form-item>
						<el-button icon="el-icon-arrow-down" v-if="allExpand && equipDataTree.length>1" title="点击全部收起"
							class="allExpand" @click="showAllDevice(false)"></el-button>
						<el-button icon="el-icon-arrow-up" v-if="!allExpand && equipDataTree.length>1" title="点击全部展开"
							class="allExpand" @click="showAllDevice(true)"></el-button>
					</el-form>
					<div class="deviceData clear" ref="deviceData" v-show="already">
						<div v-for="(equip,i) in equipDataTree" :key="equip.id" class="oneDevice">
							<!-- <div style="width:100%;height:0.8rem;line-heigth:0.8rem;background-color:rgba(0, 0, 0, 0.5);color:white;margin:0 auto;padding:0 0.15rem;"> -->
							<div class="bottom_top clear" style="width:99%;border-radius:4px;">
								<div class="bottom_top_left"
									style="border-top-left-radius:4px;border-bottom-left-radius:4px;">
									<div style="float:left;width:5.8rem;height:0.8rem;line-height:0.8rem;">
										<!-- <span class="oneDeviceName">设备名称:</span> -->
										<i class="el-icon-s-tools pointName"
											:style="{'color':equip.type==3?'deepskyblue':''}"></i>
										<span class="oneDeviceName over"
											:style="{'color':equip.type==3?'deepskyblue':''}">{{equip.equip_name}}</span>
									</div>
									<div style="float:right;margin-left:0.5rem;">
										<span style="font-size: 0.3rem;color:#eef;">报警状态:</span>
										<i class="el-icon-bell" :class="equip.is_alarm==1?'alarm_on':'alarm_off'"
											style="transform:none;vertical-align: middle;margin-top:-1px;"></i>
										<!-- <span :style="{'color':equip.is_alarm==1?'red':'lightgreen'}">{{equip.is_alarm==1?'正在报警':'正常'}}</span> -->
									</div>
									<div style="float:right;margin-left:0.5rem;">
										<span style="font-size: 0.3rem;color:#eef;">在线状态:</span>
										<!-- <span :style="{'color':equip.is_on==1?'lightgreen':'red'}">{{equip.is_on==1?'在线':'离线'}}</span> -->
										<span :class="equip.is_on==1?'onlineState':'offlineState'"></span>
									</div>
								</div>
								<!-- <el-form v-model="equip.oneDeviceForm" inline
										style="width:auto;float:left;text-align: left;height:0.8rem;line-height:0.8rem;margin-right:0.4rem;"> -->
								<el-form v-model="equip.oneDeviceForm" inline class="bottom_top_right">

									<el-form-item v-show="equip.type==1 && equip.groups_count>1">
										<span
											style="display:inline-block;width:1.6rem;text-align:right;font-size: 0.3rem;color:#fff;">变量分组:</span>
										<el-select v-model="equip.oneDeviceForm.sgroup_id" @change="changeDataGroup(i)"
											style="width:5rem;height:0.6rem;" class="oneDeviceSeclt">
											<el-option class="oneOption" v-for="item in equip.groupList" :key="item.id"
												:value="item.id" :label="item.sgroup_name">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item v-if="Number(equip.vars_count)">
										<span
											style="display:inline-block;width:1.6rem;text-align:right;font-size: 0.3rem;color:#fff;">变量属性:</span>
										<!-- <el-select v-model="equip.oneDeviceForm.data_type" style="width:2.8rem;height:0.6rem;" class="oneDeviceSeclt" -->
										<el-select v-model="equip.oneDeviceForm.data_type"
											style="width:5rem;height:0.6rem;" class="oneDeviceSeclt"
											@change="changeDataType(equip.oneDeviceForm.data_type,i)">
											<el-option class="oneOption" v-for="item in dataTypes" :key="item.value"
												:value="item.value" :label="item.label">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item v-if="equip.app_scene==8">
										<el-button type="primary" size="mini" @click="showPhoto(equip.id,equip.equip_name)">拍照</el-button>
									</el-form-item>
								</el-form>
								<div class="rightIcon">
									<!-- <el-button icon="el-icon-video-camera" v-if="equip.cameras_count" title="点击可查看监控视频" class="oneExpand" @click=""></el-button> -->
									<el-button icon="el-icon-refresh" title="点击刷新" class="oneExpand"
										@click="refreshOneDeviceData(equip.id,equip.oneDeviceForm.data_type)"></el-button>
									<el-button icon="el-icon-arrow-down" v-if="equip.visible" title="点击收起"
										class="oneExpand" @click="showOneDevice(i,false)"></el-button>
									<el-button icon="el-icon-arrow-up" v-else title="点击展开" class="oneExpand"
										@click="showOneDevice(i,true)"></el-button>
								</div>
							</div>
							<div id="isfull" v-if="equip.type==1 && equip.visible">
								<div v-for="(group,n) in equip.groups" :key="group.id">
									<div
										v-show="equip.oneDeviceForm.sgroup_id==group.id || equip.oneDeviceForm.sgroup_id==0">
										<div v-show="equip.groups_count>1 && ((equip.oneDeviceForm.data_type==1 && group.sensors.real.length) || (equip.oneDeviceForm.data_type==2 && group.sensors.vars.length))"
											class="slave_top">
											<!-- <span>子设备:</span> -->
											<span>●</span>
											<span :title="'组名:'+group.sgroup_name">{{group.sgroup_name}}</span>
											<!-- <el-button type="primary" size="mini"
											style="float:right;margin-top:2px;margin-left:0.2rem;width:1.2rem;height:0.5rem;line-height:0.5rem;padding:0;"
											@click="refreshOneSlaveData(equip.id,equip.oneDeviceForm.slave_id,equip.oneDeviceForm.data_type)">刷新</el-button> -->
										</div>
										<div v-show="equip.oneDeviceForm.data_type==1 && equip.visible">
											<SensorRealData v-if="group.sensors.real.length" :equip="equip"
												:slave="group" :baseurl="baseurl" :changeVal="changeVal"
												:changeState="changeState" :changeState2="changeState2"
												:changeState3="changeState3" :changeState4="changeState4"
												:roundLineLive="roundLineLive" />
											<div v-if="!group.sensors.real.length && equip.oneDeviceForm.sgroup_id!=0"
												style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
												{{equip.groups_count<=1?'该设备暂无实时数据':'该分组暂无实时数据'}}
											</div>
										</div>
										<div v-if="equip.oneDeviceForm.data_type==2 && equip.visible">
											<SensorVarData v-if="group.sensors.vars.length" :equip="equip"
												:slave="group" :baseurl="baseurl" :changeVal="changeVal"
												:changeState="changeState" :changeState2="changeState2"
												:changeState3="changeState3" :changeState4="changeState4" />
											<div v-if="!group.sensors.vars.length && equip.oneDeviceForm.sgroup_id!=0"
												class="databox"
												style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
												{{equip.groups_count<=1?'该设备暂无参数数据':'该分组暂无参数数据'}}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div v-if="(equip.type==2 || equip.type==3)  && equip.visible" id="isfull">
								<div v-show="equip.oneDeviceForm.data_type==1 && equip.visible">
									<SensorRealData v-if="equip.sensors.real.length" :equip="equip" :slave="equip"
										:baseurl="baseurl" :changeVal="changeVal" :changeState="changeState"
										:changeState2="changeState2" :changeState3="changeState3"
										:changeState4="changeState4" :roundLineLive="roundLineLive" />
									<div v-else style="width:100%;text-align:center;font-size: 16px;">该设备暂无实时数据</div>
								</div>
								<div v-if="equip.oneDeviceForm.data_type==2 && equip.visible">
									<SensorVarData v-if="equip.sensors.vars.length" :equip="equip" :slave="equip"
										:baseurl="baseurl" :changeVal="changeVal" :changeState="changeState"
										:changeState2="changeState2" :changeState3="changeState3"
										:changeState4="changeState4" />
									<div v-else class="databox"
										style="display:block!important;text-align:center;color:#999;font-size:0.3rem;">
										该设备暂无参数数据
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane v-if="showViewTab" name="view" ref="view"><span slot="label"><i class="el-icon-postcard"
							style="margin-right: 3px;"></i>组态监控</span>
					<div style="width:100%;height:1.2rem;border-bottom:1px solid #ccc;margin:0 auto;">
						<!-- <el-form v-model="viewForm" inline
							style="min-width:30%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;"> -->
						<el-form v-model="viewForm" inline
							style="min-width:18%;float:left;text-align: left;height:1rem;line-height:1rem;margin-top:0.2rem;">
							<el-form-item>
								<span style="font-size: 0.3rem;">组态:</span>
								<el-select v-model="viewForm.view_id" class="inpu viewInput"
									@change="changeView(viewForm.view_id)" placeholder="单选,默认第一个组态">
									<el-option class="oneOption" v-for="item in viewList" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item>
								<span style="font-size: 0.3rem;">图纸:</span>
								<el-select v-model="viewForm.stage_id"  class="inpu viewInput"
									@change="changeViewStage(viewForm.stage_id)"  placeholder="单选,默认第一个图纸">
									<el-option  class="oneOption" v-for="item in drawList" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item> -->
						</el-form>
						<el-button type="primary" size="mini" id="goback" style="margin-left:0.4rem;"
							@click="fullViewScreen">全屏显示</el-button>
						<el-button type="primary" size="mini" id="goback" v-if="drawList.length>1 && !isPlay"
							@click="swiperStage">图纸轮播</el-button>
						<el-button type="primary" size="mini" id="goback" v-if="drawList.length>1 &&  isPlay"
							@click="stopTrunView">停止轮播</el-button>
						<el-button type="primary" size="mini" id="goback" @click="refreshViewAndData">刷新</el-button>
					</div>
					<iframe v-if="viewForm.stage_id && showView && topTab=='view'"
						:src="'static/optionZT/client_view.html?stageId='+viewForm.stage_id" id="mainIframe"
						name="mainIframe" ref="mainIframe" class="fram" frameborder="no"
						:class="drawList.length<=1?'fram_2':''"></iframe>
					<div v-if="isFullViewscreen" class="viewbtn_2">
						<img src="../../static/back.png" title="点击退出全屏" @click="fullViewScreen" />
						<i class="el-icon-refresh  " style="cursor: pointer;" title="点击刷新画面" @click="refreshViewAndData"></i>
						<img src="../../static/list.png" style="margin-left:0.12rem;" title="显示\隐藏组态列表"
							v-if="viewList.length>1" @click="fullList=!fullList" />
					</div>
					<div class="viewBox" v-if="viewList.length>1 && fullList && isFullViewscreen">
						<div class="oneView" :class="nowView==item.label?'active_2':''" v-for="(item,i) in viewList"
							:key="i" @click="changeStage(item,$event)"><span>{{item.label}}</span></div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="statement"><span slot="label"><i class="el-icon-data-board"
								style="margin-right: 3px;"></i>数据报表</span>
						<el-form v-model="tableForm" inline
							style="width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
							<el-form-item>
								<span class="labelName">报表名称:</span>
								<el-select v-model="tableForm.title" class="inpu" @change="getAnalysisData(tableForm.title, tableForm.value,tableForm.type)">
									<el-option class="oneOption" v-for="item in tableTables" :key="item.value"
										:value="item.value" :label="item.label" style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span class="labelName">报表类型:</span>
								<el-select v-model="tableForm.type" class="inpu"
									@change="changeAnalysisType(tableForm.type)">
									<el-option class="oneOption" v-for="item in tableTypes" :key="item.value"
										:value="item.value" :label="item.label" style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<span v-if="tableForm.type == 1" class="labelName">日期选择:</span>
								<span v-if="tableForm.type == 3" class="labelName">月份选择:</span>
								<span v-if="tableForm.type == 4" class="labelName">年份选择:</span>
								<el-date-picker v-if="tableForm.type == 1" v-model="tableForm.value" type="date"
								 @change="getAnalysisData(tableForm.title, tableForm.value,tableForm.type)"	value-format="yyyy-MM-dd" align="left" style="width:5rem!important;">
								</el-date-picker>
								<el-date-picker v-if="tableForm.type == 3" v-model="tableForm.value" type="month"
								 @change="getAnalysisData(tableForm.title, tableForm.value,tableForm.type)"	value-format="yyyy-MM" align="left" style="width:5rem!important;">
								</el-date-picker>
								<el-date-picker v-if="tableForm.type == 4" v-model="tableForm.value" type="year"
								 @change="getAnalysisData(tableForm.title, tableForm.value,tableForm.type)"	value-format="yyyy" align="left" style="width:5rem!important;">
								</el-date-picker>
							</el-form-item>

							<el-form-item v-if="tableTables.length">
								<!-- <el-button type="primary" size="mini"
									@click="getAnalysisData(analysisForm.title, analysisForm.value,analysisForm.type)">
									查询</el-button> -->
								<el-button type="primary" size="mini" style="margin-left:0.3rem;"
									@click="sendOutTable()">
									导出</el-button>
								<!-- <a :href="$baseurl + 'api/statement/download?id=' + analysisForm.title
					+ '&date=' + analysisForm.value + '&token=' + win.localStorage.getItem('attoken')"
									style="vertical-align:middle;color:#eee;margin-left:0.25rem;" class="newAll"> 导出</a>-->
							</el-form-item>
						</el-form>
						<div class="deviceData">
							<div class="container_table">
								<el-table :data="tableData" border fit size="small" style="width:100%;" :header-cell-style="{
										'background-color':tableHead,
										'color': 'white',
										'fontSize':'0.3rem',
										'whiteSpace':'nowrap'
									}" :cell-style="{'fontSize':'0.3rem'}">

									<el-table-column v-for="(label, n) in tableFields" :key="'kl' + n" :label="label"
										align="center" min-width="100">

										<template slot-scope="scope">
											<span>{{ scope.row[n] }}</span>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
				</el-tab-pane>
				<el-tab-pane name="history"><span slot="label"><i class="el-icon-s-data"
							style="margin-right: 3px;"></i>历史数据</span>

					<el-form v-model="historyForm" inline
						style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
						<el-form-item>
							<span style="font-size: 0.3rem;">设备:</span>
							<el-select v-model="historyForm.device" class="inpu"
								@change="changeHistoryDevice(historyForm.device)" placeholder="单选,默认第一个">
								<el-option class="oneOption" v-for="item in devices" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-show="historyForm.deviceType==1 && historyForm.groupsCount>1">
							<span style="font-size: 0.3rem;">变量分组:</span>
							<el-select v-model="historyForm.sgroup_id" class="inpu"
								@change="changeHistoryGroup(historyForm.sgroup_id)" placeholder="单选,默认第一个">
								<el-option class="oneOption" v-for="item in historyGroups" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;">数据点:</span>
							<el-select v-model="historyForm.sensorIds" class="inpu"
								@change="changeHistorySensor(historyForm.sensorIds)" multiple collapse-tags clearable
								:placeholder="historyType=='table'?'可多选,默认全部':'可多选,默认前10条(或全部)'">
								<el-option class="oneOption" v-for="item in varSensors" :key="item.value"
									:value="item.value" :label="item.label"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;">时间:</span>
							<el-date-picker v-model="historyForm.value" type="daterange" align="left" class="inpu"
								@change="changeHistoryTime(historyForm.value)" unlink-panels value-format="yyyy-MM-dd"
								range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
								:picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item v-if="historyType=='chart' && varSensors.length">
							<el-button type="primary" size="mini" style="vertical-align:middle;"
								@click="showHistoryTable(1,queryParams.pageSize,historyForm.device,historyForm.sgroup_id,historyForm.sensorIds.join(','),historyForm.value.join('~'))">表格展示</el-button>
						</el-form-item>
						<el-form-item v-if="historyType=='table' && varSensors.length">
							<el-button type="primary" size="mini" style="vertical-align:middle;"
								@click="getHistoryChart(historyForm.device,historyForm.sgroup_id,historyForm.sensorIds.join(','),historyForm.value.join('~'))">曲线展示</el-button>
						</el-form-item>
						<el-form-item v-if="historyType=='table'">
							<el-button type="primary" size="mini" style="vertical-align:middle;margin-left:-0.25rem;"  @click="sendOutHistory">导出</el-button>
							<!-- <a :href="'https://api.ykiot.net/api/equip/download?id='+historyForm.device
								+'&sgroup_id='+historyForm.sgroup_id+'&sensor_id='+historyForm.sensorIds.join(',')+'&date_range='+historyForm.value.join('~')+'&token='+win.localStorage.getItem('attoken')"
								style="vertical-align:middle;color:white;margin-left:-0.25rem;" target="_blank"
								class="newAll">导出</a> -->
						</el-form-item>
					</el-form>
					<div class="deviceData">
						<div v-show="historyType=='table'" class="container_table">
							<el-table :data="historyData" border fit size="small" style="width:100%;"
								:header-cell-style="{
										'background-color':tableHead,
										'color': 'white',
										'fontSize':'0.3rem',
										'whiteSpace':'nowrap'
									}" :cell-style="{'fontSize':'0.3rem'}">
								<el-table-column prop="num" label="序号" align="center" min-width="50" fixed>
								</el-table-column>
								<el-table-column prop="time" label="上报时间" align="center" min-width="140" fixed>
								</el-table-column>
								<el-table-column v-for="item in fields" :key='item.value' :label="item.label"
									align="center" :min-width="item.label.length>5?'100':'74'">
									<template slot-scope="scope">
										<span>{{scope.row.data[item.value]}}</span>
									</template>
								</el-table-column>

							</el-table>
							<div class="pagination">
								<el-pagination @size-change="handleSizeChange" @current-change="current_change"
									:current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
									:page-sizes="[10,15,20]" layout="total,
									sizes, prev, pager, next, jumper" :total="queryParams.total">
								</el-pagination>
							</div>
						</div>
						<div v-if="historyType=='chart' && varSensors.length"
							style="width:100%;height:100%;position:relative;">
							<div id="historyChart" ref="historyChart" v-loading="loadingHistory"
								element-loading-text="正在加载中..."></div>
							<span class="chartTip">点击下方图示,可隐藏或显示对应曲线</span>
						</div>
						<div v-if="historyType=='chart' && !varSensors.length"
							style="width:100%;height:100%;position:relative;">
							<!-- <div id="historyChart" ref="historyChart" v-loading="loadingHistory" element-loading-text="正在加载中..."></div> -->
							<div style="font-size:0.3rem;color:#ccc;margin-top:0.2rem;text-align:center;">
								暂无数据或暂无数据点启用数据存储</div>
						</div>
						<div v-if="historyType=='wait'"
							style="width:100%;height:100%;font-size:0.3rem;text-align:center;">
							正在进行适配计算,稍等...
						</div>
					</div>
				</el-tab-pane>


				<el-tab-pane name="analysis"><span slot="label"><i class="el-icon-data-board"
							style="margin-right: 3px;"></i>数据分析</span>
					<el-form v-model="analysisForm" inline
						style="width:100%;float:left;text-align: left;height:2.2rem;line-height:0.8rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
						<el-form-item>
							<span style="font-size: 0.3rem;">设备:</span>
							<el-select v-model="analysisForm.device" class="inpu"
								@change="changeAnalysisDevice(analysisForm.device)" placeholder="单选,默认第一个">
								<el-option class="oneOption" v-for="item in devices" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-show="analysisForm.deviceType==1 && analysisForm.groupsCount>1">
							<span style="font-size: 0.3rem;">变量分组:</span>
							<el-select v-model="analysisForm.sgroup_id" class="inpu"
								@change="changeAnalysisGroup(analysisForm.sgroup_id)" placeholder="单选,默认第一个">
								<el-option class="oneOption" v-for="item in analysisGroups" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;"
								:style="{'margin-left':analysisForm.groupsCount>1?'0':'0.3rem'}">数据点:</span>
							<el-select v-model="analysisForm.sensorIds" class="inpu"
								@change="changeAnalysisSensor(analysisForm.sensorIds)" multiple collapse-tags clearable
								placeholder="可多选,默认前5个">
								<el-option class="oneOption" v-for="item in analysisVarSensors" :key="item.value"
									:value="item.value" :label="item.label"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;"
								:style="{'margin-left':analysisForm.groupsCount>1?'0':'0.3rem'}">算法:</span>
							<el-select v-model="analysisForm.methodsValue" class="inpu"
								@change="changeAnalysisMethod(analysisForm.methodsValue)" multiple collapse-tags
								clearable placeholder="可多选,默认前三个">
								<el-option class="oneOption" v-for="item in analysisMethods" :key="item.value"
									:value="item.value" :label="item.label" style="text-align:left;padding-left:0.3rem">
								</el-option>
							</el-select>
						</el-form-item></br>

						<el-form-item style="margin-top:-0.2rem;">
							<span style="font-size: 0.3rem;">周期:</span>
							<el-select v-model="analysisForm.period" class="inpu"
								@change="changeAnalysisPeriod(analysisForm.period)">
								<el-option class="oneOption" v-for="item in periods" :key="item.value"
									:value="item.value" :label="item.label" style="text-align:left;padding-left:0.3rem">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="analysisForm.period!='1m'" style="margin-top:-0.2rem;margin-left:0.3rem;">
							<span class="labelName" style="font-size: 0.3rem;" >时间段:</span>
							<el-date-picker v-model="analysisForm.value" type="daterange" align="left" class="inpu"
								@change="changeAnalysisTime(analysisForm.value)" unlink-panels value-format="yyyy-MM-dd"
								range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
								:picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item v-else style="margin-top:-0.2rem;">
							<span class="labelName" style="font-size: 0.3rem;margin-left:0.3rem;" >月份段:</span>
							<el-date-picker
							      v-model="analysisForm.value"
								  type="monthrange"
								  value-format="yyyy-MM"
								  align="left" class="inpu"
								  style="width:5rem!important;"
								  @change="changeAnalysisTime(analysisForm.value)"
								  unlink-panels
								  range-separator="-"
								  start-placeholder="开始月份"
								  end-placeholder="结束月份"
								  :picker-options="pickerMonthOptions"
								  >
							</el-date-picker>
						</el-form-item>
						<el-form-item style="margin-top:-0.2rem;" v-show="analysisForm.period=='1h'">
							<span style="font-size: 0.3rem;">起止点:</span>
							<el-time-select v-model="analysisForm.start_time" align="left" class=""
								style="width:5rem!important;" @change="changeAnalysisStartTime(analysisForm.start_time)"
								placeholder="选择开始时间" :picker-options="{start: '00:00',step: '01:00',end: '23:00'}">
							</el-time-select>
						</el-form-item>
						<el-form-item style="margin-top:-0.2rem;">
							<a :href="$baseurl+'api/equip/downloadAnalysis?id='+analysisForm.device
							+'&sensor_id='+analysisForm.sensorIds.join(',')+'&functions='+analysisForm.methodsValue.join(',')+'&group='+analysisForm.period+'&date_range='+analysisForm.value.join('~')+'&token='+win.localStorage.getItem('attoken')"
								style="vertical-align:middle;color:#eee;margin-left:-0.25rem;" class="newAll">导出</a>
						</el-form-item>
					</el-form>
					<div class="analysisData">
						<div class="container_table" v-show="analysisType=='table'">
							<el-table :data="analysisData" border fit show-summary :summary-method="getSummary"
								size="small" style="width:100%;" :header-cell-style="{
								'background-color':tableHead,
								'color': 'white',
								'fontSize':'0.3rem',
								'whiteSpace':'nowrap'

								}" :cell-style="{'fontSize':'0.3rem'}">
								<el-table-column prop="num" label="序号" type="index" align="center" min-width="40" fixed>
								</el-table-column>
								<el-table-column prop="time" label="时间" align="center" min-width="100" fixed>
								</el-table-column>
								<el-table-column v-for="(item,i) in analysisFields" :key="i" :label="item"
									align="center" min-width="120">
									<el-table-column v-for="(sub,n) in analysisForm.methods" :key="sub.value"
										:label="sub.label" align="center" :min-width="sub.value=='pass'?'80':'60'"
										:prop="sub.value+'_'+i">
										<template slot-scope="scope">
											<span>{{scope.row[sub.value+'_'+i]}}</span>
										</template>
									</el-table-column>
								</el-table-column>
							</el-table>
						</div>
						<div class="analysis_echart" v-if="analysisType=='chart' && analysisFields.length"
							style="width:100%;height:100%;position:relative;margin-top:0;">
							<div id="analysisChart" ref="analysisChart" v-loading="loadingAnalysis"
								element-loading-text="正在加载中..."></div>
							<span class="chartTip">点击下方图示,可隐藏或显示对应曲线</span>
							<div class="methodSelsct">
								<span style="font-size: 0.3rem;">当前算法:</span>
								<el-select v-model="nowMethod" class="inpu"
									@change="getAnalysis(analysisForm.device,analysisForm.sensorIds.join(','),
								analysisForm.methodsValue.join(','),analysisForm.period,analysisForm.value.join('~'),analysisForm.start_time,'chart',nowMethod)">
									<el-option class="oneOption" v-for="item in analysisForm.methods" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</div>
						</div>

						<div class="analysis_echart" v-if="analysisType=='bar' && analysisFields.length"
							style="width:100%;height:100%;position:relative;margin-top:0;">
							<div id="analysisBar" ref="analysisBar" v-loading="loadingAnalysis"
								element-loading-text="正在加载中..."></div>
							<span class="chartTip">点击图示,可隐藏或显示对应曲线</span>
							<div class="methodSelsct">
								<span style="font-size: 0.3rem;">当前变量:</span>
								<el-select v-model="nowAnalysisSensor" class="inpu"
									@change="getAnalysis(analysisForm.device,nowAnalysisSensor,
								analysisForm.methodsValue.join(','),analysisForm.period,analysisForm.value.join('~'),analysisForm.start_time,'bar','')">
									<el-option class="oneOption" v-for="item in analysisForm.nowSensors" :key="item.value"
										:value="item.value" :label="item.label"
										style="text-align:left;padding-left:0.3rem">
									</el-option>
								</el-select>
							</div>
						</div>

						<div v-if="analysisType=='chart' && !analysisFields.length"
							style="width:100%;height:1rem;line-height: 1rem;position:relative;">

							<div style="font-size:0.3rem;color:#ccc;text-align:center;">
								暂无数据或暂无数据点启用数据存储</div>
						</div>
						<div v-if="analysisType=='bar' && !analysisFields.length"
							style="width:100%;height:1rem;line-height: 1rem;position:relative;">

							<div style="font-size:0.3rem;color:#ccc;text-align:center;">
								暂无数据或暂无数据点启用数据存储</div>
						</div>
						<div v-if="analysisType=='wait'"
							style="width:100%;height:1rem;line-height: 1rem;font-size:0.3rem;text-align:center;">
							正在进行适配计算,稍等...
						</div>
					</div>
				</el-tab-pane>
				<!-- <el-tab-pane name="power"><span slot="label" ><i class="el-icon-data-board"></i>示功图</span>
						<el-form v-model="powerForm" inline
							style="width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
							<el-form-item>
								<span style="font-size: 0.3rem;">设备:</span>
								<el-select v-model="powerForm.device"  class="inpu"
									@change=""  placeholder="单选,默认第一个">
									<el-option  class="oneOption" v-for="item in devices" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-show="powerForm.deviceType==1 && powerForm.slavesCount>1">
								<span style="font-size: 0.3rem;">子设备:</span>
								<el-select v-model="powerForm.slave_id"  class="inpu"
									@change=""  placeholder="单选,默认第一个">
									<el-option  class="oneOption" v-for="item in powerSlaves" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<span style="font-size: 0.3rem;">数据点:</span>
								<el-select v-model="powerForm.sensorIds"  class="inpu"
									@change="" >
									<el-option  class="oneOption" v-for="item in powerVarSensors" :key="item.value" :value="item.value" :label="item.label"
										:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
									</el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-button type="danger" size="small" class="timebtn" @click="deletePowerChart">删除</el-button>
							</el-form-item>
						</el-form>
						<div class="deviceData" style="width:99.4%">

						<div id="powerChartLive" ref="powerChartLive" v-loading="powerLoading" element-loading-text="等待数据发送中..."
						 element-loading-spinner="el-icon-loading"></div>
						 </div>
					</el-tab-pane> -->
				<el-tab-pane name="alarm"><span slot="label"><i class="el-icon-bell"
							style="margin-right: 3px;"></i>报警记录</span>
					<el-form v-model="alarmForm" inline
						style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
						<el-form-item>
							<span style="font-size: 0.3rem;">设备:</span>
							<el-select v-model="alarmForm.device" class="inpu" multiple collapse-tags
								placeholder="可多选,默认全部">
								<el-option class="oneOption" v-for="item in devices" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;">时间:</span>
							<el-date-picker v-model="alarmForm.value" type="daterange" align="left" class="inpu"
								unlink-panels value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
								end-placeholder="结束日期" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="mini"
								@click="getAlarm(queryParams_2.pageNo, queryParams_2.pageSize,alarmForm.device, alarmForm.value.join('~'))">查询</el-button>
							<el-button type="primary" size="mini" @click="getAllAlarm()">全选并查询</el-button>
						</el-form-item>

					</el-form>
					<div class="deviceData">
						<div class="container_table">
							<el-table :data="alarmData" size="small" border fit style="width:100%;" :header-cell-style="{
							 'background-color':tableHead,
							 'color': 'white',
							 'fontSize':'0.3rem'

							 }" :cell-style="{'fontSize':'0.3rem'}">
								<el-table-column label="ID" prop="id" align="center" min-width="60" fixed>
								</el-table-column>
								<el-table-column prop="equip_name" label="设备名称" align="center" min-width="140" fixed>
								</el-table-column>
								<el-table-column prop="sgroup_name" label="分组名称" align="center" min-width="140">
								</el-table-column>
								<el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="140">
								</el-table-column>
								<el-table-column prop="alarm_type" label="报警类型" align="center" min-width="120">
								</el-table-column>
								<el-table-column prop="trigger_cond" label="触发条件" align="center" min-width="120">
								</el-table-column>
								<el-table-column prop="trigger_value" label="触发值" align="center" min-width="120">
								</el-table-column>
								<el-table-column prop="alarm_time" label="报警时间" align="center" min-width="180">
								</el-table-column>
							</el-table>
							<div class="pagination">
								<el-pagination @size-change="handleSizeChange_2" @current-change="current_change_2"
									:current-page="queryParams_2.pageNo" :page-size="queryParams_2.pageSize"
									:page-sizes="[10,15,20]" layout="total,
								 sizes, prev, pager, next, jumper" :total="queryParams_2.total">
								</el-pagination>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="log"><span slot="label"><i class="el-icon-thumb"
							style="margin-right: 3px;"></i>操作记录</span>
					<el-form v-model="operForm" inline
						style=" width:100%;float:left;text-align: left;height:1rem;line-height:1rem;border-bottom:1px solid #ccc;margin-top:0.2rem;">
						<el-form-item>
							<span style="font-size: 0.3rem;">设备:</span>
							<el-select v-model="operForm.device" class="inpu" multiple collapse-tags
								placeholder="可多选,默认全部">
								<el-option class="oneOption" v-for="item in devices" :key="item.value"
									:value="item.value" :label="item.label" :disabled="item.disabled"
									:style="{color:item.disabled?'#aaa':'','text-align':'left','padding-left':'0.3rem'}">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<span style="font-size: 0.3rem;">时间:</span>
							<el-date-picker v-model="operForm.value" type="daterange" align="left" class="inpu"
								unlink-panels value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期"
								end-placeholder="结束日期" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="mini"
								@click="getLogs(queryParams_3.pageNo, queryParams_3.pageSize,operForm.device, operForm.value.join('~'))">查询</el-button>
							<el-button type="primary" size="mini" @click="getAllLogs()">全选并查询</el-button>
						</el-form-item>

					</el-form>
					<div class="deviceData" style="background-color: #fff;">
						<div class="container_table">
							<el-table :data="operData" size="small" border fit style="width:100%;" :header-cell-style="{
							'background-color':tableHead,
							 'color': 'white',
							 'fontSize':'0.3rem',
							 'whiteSpace':'nowrap'

							 }" :cell-style="{'fontSize':'0.3rem'}">
								<el-table-column label="ID" prop="id" align="center" min-width="60" fixed>
								</el-table-column>
								<el-table-column prop="user_name" label="用户名称" align="center" min-width="120" fixed>
								</el-table-column>
								<el-table-column prop="equip_name" label="设备名称" align="center" min-width="150">
								</el-table-column>
								<el-table-column prop="sgroup_name" label="分组名称" align="center" min-width="150">
								</el-table-column>
								<el-table-column prop="sensor_name" label="数据点名称" align="center" min-width="150">
								</el-table-column>
								<el-table-column prop="value" label="写入值" align="center" min-width="150">
								</el-table-column>
								<el-table-column prop="log_time" label="操作时间" align="center" min-width="120">
								</el-table-column>
							</el-table>
							<div class="pagination">
								<el-pagination @size-change="handleSizeChange_3" @current-change="current_change_3"
									:current-page="queryParams_3.pageNo" :page-size="queryParams_3.pageSize"
									:page-sizes="[10,15,20]" layout="total,
								 sizes, prev, pager, next, jumper" :total="queryParams_3.total">
								</el-pagination>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="map" style="position: relative;"><span slot="label"><i class="el-icon-map-location"
							style="margin-right: 3px;"></i>设备地图</span>
					<div id="content" ref="content"  v-loading="mapLoading"
						element-loading-text="正在加载设备和地图,请稍等..." element-loading-spinner="el-icon-loading"></div>
					<div class="search">
						<el-form inline :model="mapForm" class="searchForm">
							<el-form-item>
								<span class="chaxu" style="vertical-align:middle;">设备状态：</span>
								<el-select v-model="mapForm.state" class="inpu"
									style="background-color:transparent;color:#eee;width:3rem;vertical-align:middle;" placeholder="选择设备状态"
									@change="changeMapDeviceState(mapForm.state)">
									<el-option class="mapOption" v-for="item in states" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<!-- <el-form inline :model="mapForm" class="searchForm">
							<el-form-item>
								<span class="chaxu" style="vertical-align:middle;">显示：</span>
								<el-select v-model="mapForm.show_type" class="inpu"
									style="background-color:transparent;color:#eee;width:3rem;vertical-align:middle;"
									placeholder="选择显示内容" @change="changeMapShow(mapForm.show_type)">
									<el-option class="mapOption" v-for="item in mapShowTypes" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==1">
								<span class="chaxu">设备状态：</span>
								<el-select v-model="mapForm.state" class="inpu"
									style="background-color:transparent;color:#fff;width:3rem;" placeholder="选择设备状态"
									@change="changeMapDeviceState(mapForm.state)">
									<el-option class="mapOption" v-for="item in states" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==2">
								<span class="chaxu">设备名称：</span>
								<el-select v-model="mapForm.equip_id" class="inpu mapDevice" placeholder="选择设备"
									@change="changeGraspEquipOrRange">
									<el-option class="mapOption" v-for="item in graspEquips" :key="item.value"
										:value="item.value" :label="item.label" :disabled="item.disabled">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="mapForm.show_type==2">
								<span class="chaxu">时间范围：</span>
								<el-date-picker v-model="mapForm.time_range" @change="changeGraspEquipOrRange"
									style="background-color:transparent;color:#fff;" type="datetimerange"
									:picker-options="pickerDateTimeOptions" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
									value-format="yyyy-MM-dd HH:mm:ss" align="right">
								</el-date-picker>
							</el-form-item>

						</el-form> -->
					</div>
					<button class="mapbtn" id="mapbtn" ref="mapbtn" @click="fullScreen">
						全屏切换
					</button>
				</el-tab-pane>
				<el-tab-pane v-if="showCameraTab" name="video"><span slot="label"><i class="el-icon-video-camera"
							style="margin-right: 3px;"></i>视频监控</span>
					<!-- 下面三句测试有效，暂用于测试 -->
					<!-- <el-button type="primary" size="small" @click="player1.play()">播放</el-button> -->
					<!-- <el-button type="primary" size="small" @click="player1.pause()">暂停</el-button> -->
					<!-- <el-button type="primary" size="small" @click="player1.stop()">关闭</el-button> -->
					<div v-if="showVideo && cameras.length>=4 " id="cameraData">
						<!-- <div v-for="i in 4" :key="i" class="cameraBox"> -->
						<div class="cameraBox">
							<div style="width:100%;" class="camera">
								<span>选择摄像头：</span>
								<el-select v-model="camera1" placeholder="选择摄像头" style="width:5rem;"
									@change="changeCamera(camera1,1)">
									<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
										:key="item.value" :value="item.value" :label="item.label">
									</el-option>
								</el-select>
								<el-button type="primary" size="mini"
									style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
							</div>
							<div class="head_video" ref="videoBox1">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
						<div class="cameraBox">
							<div style="width:100%;" class="camera">
								<span>选择摄像头：</span>
								<el-select v-model="camera2" placeholder="选择摄像头" style="width:5rem;"
									@change="changeCamera(camera2,2)">
									<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
										:key="item.value" :value="item.value" :label="item.label">
									</el-option>
								</el-select>
								<el-button type="primary" size="mini"
									style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
							</div>
							<div class="head_video" ref="videoBox2">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
						<div class="cameraBox">
							<div style="width:100%;" class="camera">
								<span>选择摄像头：</span>
								<el-select v-model="camera3" placeholder="选择摄像头" style="width:5rem;"
									@change="changeCamera(camera3,3)">
									<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
										:key="item.value" :value="item.value" :label="item.label">
									</el-option>
								</el-select>
								<el-button type="primary" size="mini"
									style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
							</div>
							<div class="head_video" ref="videoBox3">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
						<div class="cameraBox">
							<div style="width:100%;" class="camera">
								<span>选择摄像头：</span>
								<el-select v-model="camera4" placeholder="选择摄像头" style="width:5rem;"
									@change="changeCamera(camera4,4)">
									<el-option style="text-align:left;padding-left:0.2rem;" v-for="item in cameras"
										:key="item.value" :value="item.value" :label="item.label">
									</el-option>
								</el-select>
								<el-button type="primary" size="mini"
									style="float:right;margin-left:0.4rem;margin-top:4px;">关闭</el-button>
							</div>
							<div class="head_video" ref="videoBox4">

								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
					</div>
					<div v-show="showVideo && cameras.length<4" id="cameraData">
						<div class="cameraBox">
							<div class="head_video_2" ref="videoBox1"
								:title="cameras[0]?cameras[0].label+'　关联设备:'+cameras[0].equip_name:''">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
						<div v-if="cameras[1] && cameras[1].value" class="cameraBox">
							<div class="head_video_2" ref="videoBox2"
								:title="cameras[1]?cameras[1].label+'　关联设备:'+cameras[1].equip_name:''">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
						<div v-if="cameras[2] && cameras[2].value" class="cameraBox">
							<div class="head_video_2" ref="videoBox3"
								:title="cameras[2]?cameras[2].label+'　关联设备:'+cameras[2].equip_name:''">
								<!-- 这里动态添加结构 -->
								<div class="imgtit" style="z-index:9999;">视频监控</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<!-- <el-tab-pane v-if="productInfo.hasImage" name="image"><span slot="label"><i class="el-icon-picture-outline"></i>项目图片</span>
						<div id="productImage" ref="productImage" class="productImage">
							<img :src="productInfo.product_image" style="width:100%;height:100%;"/>
						</div>
					</el-tab-pane> -->

			</el-tabs>
			<div v-if="!mapFullscreen && !isFullViewscreen" class="topNewMenu">
				<div v-for="(item,i) in nowMenu" :key="item.key" class="oneMenu"
					:class="menuActive==item.key?'menuActive':''" v-if="item.isShow==1"
					@click="changeMenu(item.key,$event)">
					<!-- <div > -->
					<i v-if="item.key=='data'" class="el-icon-monitor"></i>
					<i v-else-if="item.key=='view'" class="el-icon-postcard"></i>
          <i v-else-if="item.key=='statement'" class="el-icon-date"></i>
					<i v-else-if="item.key=='history'" class="el-icon-s-data"></i>
					<i v-else-if="item.key=='analysis'" class="el-icon-data-board"></i>
					<i v-else-if="item.key=='alarm'" class="el-icon-bell"></i>
					<i v-else-if="item.key=='log'" class="el-icon-thumb"></i>
					<i v-else-if="item.key=='map'" class="el-icon-map-location"></i>
					<i v-else-if="item.key=='video'" class="el-icon-video-camera"></i>
					<span style="margin-left:-3px;">{{item.title}}</span>
					<!-- </div> -->
				</div>
			</div>
			<!-- <el-button type="primary" size="mini" style="position:absolute;width:1.5rem;right:1.6rem;top:0.15rem;z-index:1;" v-if="!isShow && !isFullViewscreen && ! mapFullscreen" @click="isShow=true">显示项目</el-button> -->
			<i class="el-icon-right"
				style="position:absolute;font-size:0.6rem;left:0.1rem;top:0.12rem;z-index:10;color:#409eff;cursor:pointer;"
				title="点击展开项目列表" v-if="!isShow && !isFullViewscreen && ! mapFullscreen" @click="goWidth"></i>
			<i class="el-icon-back"
				style="position:absolute;font-size:0.6rem;left:0.1rem;top:0.12rem;z-index:10;color:#409eff;cursor:pointer;"
				title="点击折叠项目列表" v-if="isShow && !isFullViewscreen && ! mapFullscreen" @click="goWidth"></i>
			<el-button  type="primary"
				style="position:absolute;width:1.5rem;height:0.6rem;line-height:0.6rem;right:0.2rem;top:0.1rem;z-index:10;padding:0;"
				v-if="grade<=2 && !isFullViewscreen && ! mapFullscreen" @click="goExit('control')">控制台</el-button>
			<el-button  type="primary"
				style="position:absolute;width:1.5rem;height:0.6rem;line-height:0.6rem;right:0.2rem;top:0.1rem;z-index:10;padding:0;"
				v-if="grade==3 && !isFullViewscreen && ! mapFullscreen" @click="goExit('exit')">退出登录</el-button>
			<el-button icon="el-icon-full-screen" type="primary"
				style="position:absolute;width:2rem;height:0.6rem;right:2rem;top:0.1rem;z-index:10;padding:0;"
				v-if="!isFullViewscreen && ! mapFullscreen" @click="goScreenTotal">大屏监控</el-button>

		</div>

		<el-dialog width="74%" :visible.sync="innerVisible" v-el-dialog-drag :close-on-click-modal="false"
			append-to-body :show-close="close" :top="win.screen.width>=1600?'160px':'50px'" class="dial">
			<div class="toptit">
				<span>{{nowSensor}}</span> | <span>{{which}}</span>
				<span style="float:right;cursor: pointer;" @click="closeLine">关闭</span>
			</div>
			<!-- <div  class="bottom_top_left" style="width:100%;float:none;height:1rem;line-height:1rem;padding:0;" @click="changeBox"> -->
			<div v-if="sensorSave!=2" class="bottom_top" style="padding:0;margin-top:0.1rem;border:none;"
				@click="changeBox">
				<div id="live" :class="box == 'live' ? 'cardActive' : ''">
					实时曲线
				</div>
				<div id="historyData" :class="box == 'historyData' ? 'cardActive' : ''">
					历史曲线
				</div>
			</div>
			<div class="chartTime big" v-show="box=='historyData'">
				<span
					style="font-size: 0.3rem;display:inline-block;vertical-align: middle;margin-top:0.1rem;">时间:</span>
				<el-date-picker v-model="form.value" type="daterange"
					style="margin-top: 0.1rem;height:0.6rem;line-height: 0.6rem;" align="left" class="inpu"
					@change="changeChart(form.value)" unlink-panels value-format="yyyy-MM-dd" range-separator="-"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
				</el-date-picker>
			</div>
			<div id="myChart" v-if="box=='historyData' && !lineout" v-loading="loading_1"
				element-loading-text="正在加载中..."></div>
			<div id="without" v-if="box=='historyData' && lineout=='history'">抱歉,该数据点暂无历史数据！</div>
			<div id="myChartLive" ref="myChartLive" v-show="box=='live' && !lineout" v-loading="loading_2"
				element-loading-text="等待数据传输中..."></div>
			<div id="without" v-show="box=='live' && lineout=='live'">抱歉,该数据点暂无实时数据！</div>
		</el-dialog>
		<!-- 可变状态改值对话框 -->
		<el-dialog :visible="dialogFormVisible" width="25%" append-to-body :show-close="false" top="300px">
			<div class="toptit">
				<span>改变状态 | {{sateForm.sensor_name}}</span>
				<span style="float:right;cursor: pointer;" @click="dialogFormVisible=false">关闭</span>
			</div>
			<el-form :model="sateForm" style="text-align:center;margin-top:0.1rem;" inline>
				<el-form-item>
					<el-button type="primary" size="small" @click="setStateVal(0)">置0</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" style="margin-left:0.2rem;"
						@click="setStateVal(1)">置1</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" style="margin-left:0.2rem;" @click="letOneToZero">先置1，后置0
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" style="margin-left:0.2rem;" @click="letZeroToOne">先置0，后置1
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <div slot="footer" style="text-align:right;margin-top:-0.5rem;">
				<el-button type="primary" class="btn" style="border:1px solid #ccc;background-color: white;color:#111;" @click="dialogFormVisible=false">取 消</el-button>
			  </div> -->
		</el-dialog>
		<!-- 可清除报警对话框 -->
		<el-dialog :visible="dialogFormVisible_2" width="22%" append-to-body :show-close="false" top="200px">
			<div class="toptit">
				<span>清除报警 | {{sateForm.sensor_name}}</span>
				<span style="float:right;cursor: pointer;" @click="dialogFormVisible_2=false">关闭</span>
			</div>
			<el-form :model="sateForm" style="text-align:center;margin-top:0.3rem;" inline>
				<el-form-item>
					<el-button type="primary" size="small" @click="setStateVal(0)">清除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" style="margin-left:0.2rem;"
						@click="dialogFormVisible_2=false">保留</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible="dialogSwiperVisible" :width="win.screen.width>=1600?'22%':'34%'" append-to-body
			:show-close="close" top="220px">
			<div class="toptit">
				<span>图纸轮播设置</span>
				<span style="float: right; cursor: pointer" @click="dialogSwiperVisible = false">关闭</span>
			</div>
			<el-form :model="viewForm" style="text-align: left;margin-top:0.3rem;" block>
				<el-form-item label="轮播间隔:" label-width="110px">
					<el-input style="width:3rem" class="swiperInput" v-model="viewForm.interval" placeholder="30秒至600秒"
						type="number" :min="30" :max="600" :step="10"
						@change="changeInterval(viewForm.interval)"></el-input> s
				</el-form-item>
				<el-form-item label="" label-width="110px" style="margin-top:-0.3rem;">
					<p style="font-size:0.3rem;color:red;">注:限制30至600秒,默认60秒</p>
				</el-form-item>
			</el-form>
			<div style="text-align: right; margin-top: 0.3rem">
				<el-button type="primary" size="small" @click="showTrunView(viewForm.interval)">确 认</el-button>
				<el-button size="small" @click="dialogSwiperVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible="dialogPhotoVisible" :width="win.screen.width>=1600?'55%':'65%'" v-el-dialog-drag v-el-dialog-drag-width append-to-body
			:show-close="close" top="120px" class="dial">
			<div class="toptit">
				<span>拍照查看 | {{photoForm.equip_name}}</span>
				<span style="float: right; cursor: pointer" @click="closePhotoDialog()">关闭</span>
			</div>
			<div class="width:100%;height:0.8rem;line-height:0.8rem;">
				<!-- <div class="nowEquip">当前设备：{{photoForm.equip_name}}</div> -->
				<el-button type="primary" size="small"  :disabled="photoLoading" @click="takeAndUpload(photoForm.id)">拍照上传</el-button>
				<el-button type="danger" size="small" v-if="photoForm.photoList.length>1" :disabled="photoLoading" @click="deleteManyPhoto()">批量删除</el-button>
				<el-button type="danger" size="small" v-if="photoForm.photoList.length>1" :disabled="photoLoading" @click="deleteAllPhoto()">全部删除</el-button>
			    <!-- <el-pagination
				  style="float:right;margin-top:0.2rem;"
			      small
			      layout="prev, pager, next"
				  @current-change="currentPhoto"
				  :current-page="currentParams.pageNo"
			      :total="photoForm.photoList.length">
			    </el-pagination> -->
			</div>
			<div class="photoBox" v-loading="photoLoading" element-loading-text="正在拍照并上传,请稍等..." element-loading-spinner="el-icon-loading">
				<div class="onePhoto" v-for="(item,i) in photoForm.photoList" :key="item.id">
					<!-- <img :src="baseurl+item.path" title="点击放大" @click="letBig(item.path)"/> -->
					<el-image :src="baseurl+item.path" class="oneImg" title="单击选择" @click="deleteSelect($event,item)"   lazy></el-image>
					<div class="photoBottom">
						<span>{{item.time}}</span>
						<span class="delIcon" @click="sureDeletePhoto(item.id,'single')" title="删除"><i class="el-icon-delete"></i></span>
						<!-- <span class="delIcon"  @click="downloadIamge(baseurl+item.path,item.name)"><i class="el-icon-download"></i></span> -->
						<!-- <span class="delIcon"  @click="downloadIamge(item.id)"><i class="el-icon-download"></i></span> -->
						<a class="delIcon" style="color:#fff;" title="下载" :href="baseurl+'api/camera_picture/download?token='+win.localStorage.getItem('attoken')+'&id='+item.id" :download="item.name" target="_self"><i class="el-icon-download"></i></a>
						<span class="delIcon" style="color:#fff;" title="放大" @click="letBig(item.path)"><i class="el-icon-zoom-in"></i></span>
					</div>
				</div>
			</div>
			<!-- <div v-show="photoForm.bigPath" class="bigPhotoBox">
				<img   :src="baseurl+photoForm.bigPath"/>
			</div> -->
			<!-- <div style="text-align: right; margin-top: 0.2rem">
			    <el-button size="small" @click="dialogPhotoVisible = false">取 消</el-button>
			</div> -->
		</el-dialog>
		<el-dialog :visible="bigPhotoVisible" :width="win.screen.width>1920?'1200px':'800px'" append-to-body
			:show-close="close" top="100px" style="background-color: transparent;">
			<!-- <div class="toptit" style="background-color: transparent;">
				 <span>拍照查看 | {{photoForm.equip_name}}</span>
			</div> -->
			<span class="bigClose" @click="bigPhotoVisible = false"><i class="el-icon-close"></i></span>
			<div v-show="photoForm.bigPath" class="bigPhotoBox">
				<img :src="baseurl+photoForm.bigPath"/>
			</div>
		</el-dialog>

	</div>
  </v-scale-screen>
</template>
<script>
	import SensorRealData from '../templates/SensorRealData.vue';
	import SensorVarData from '../templates/SensorVarData.vue';
	import {numToTime}  from  '../common.js';
	export default {
		name: 'mainData',
		data() {
			return {
				win: window,
				tokenTimer: null,
				fromPage: '',
				fromOrder: '1',
        screenThree:false,
				//左侧项目或全局变量
				filterText: '',
				loading: false,
				// productInfo:{
				// 	hasImage:false,
				// 	product_image:''
				// },
				optionId: 0,
				optionName:'',
				options: [],
				optionNodes:[],
				grade: Number(localStorage.getItem("atuser_type")),
				//顶部菜单项数据
				isCustomMenu: false,
				nowMenu: [],
				menuActive: 'data',
				showViewTab: true,
				after: 2000,
				showCameraTab: false,
				isFirst: true,
				topTab: '',
				defaultKey: [0], //id数组
				tableHead: localStorage.getItem("bgcolor"),
				largeScreenId:Number(localStorage.getItem("largeScreenId")),
				mapLoading: false,
				isShow: true,
				devices: [],
				//是否展开所有设备
				lookAll: false,
				//是否选择了所有设备
				//deviceAll:false,
				//数据监控相关变量
				liveData: null,
				already: false,
				form: {
					device: [],
					option: 0,
					// type:1,
					// equip_state:0,
					value: []
				},
				//deviceTab:'data',
				// oneDeviceForm:{
				// 	sgroup_id:0,
				// 	data_type:1,
				// 	value:[]
				// },
				dataTypes: [{
						value: 1,
						label: '实时数据'
					},
					{
						value: 2,
						label: '参数数据'
					}
				],
				sensorSave: 1,
				allExpand: true,
				equipDataTree: [],
				one: 1,
				zero: 0,
				stateWidth: 56,
				stateWidth_2: 80,
				win: window,
				videoList: false,
				video: true,
				player1: null,
				player2: null,
				player3: null,
				player4: null,
				Vcount: 0,
				//拍照
				dialogPhotoVisible:false,
				photoForm:{
					id:0,
					equip_name:'',
					bigPath:'',
					photoList:[],
					photoIds:[]
				},
				photoLoading:false,
				bigPhotoVisible:false,

				//deviceType: 1,
				//slavesCount: 1,
				//slaveName: '',
				deviceName: '设备',
				videoUrl: '',
				//headName: "云垦物联",
				//历史数据相关变量
				source: this.$http.CancelToken.source(),
				historyForm: {
					deviceType: 1,
					groupsCount: 1,
					sensorIds: [],
					device: 0,
					sgroup_id: 0,
					value: ''
				},
				textColor: "#ff0",
				historyGroups: [],
				//historySensors:[],
				historyType: 'table', //table为表格显示 ,chart为曲线显示,wait为额chart拉伸过度
				historyData: [],
				varSensors: [],
				fields: [],
				lines: [],
				//报警数据变量
				alarmForm: {
					device: [],
					value: ''
				},
				//操作记录
				operForm: {
					device: [],
					value: ''
				},
        //数据报表
        tableForm: {
        	type:1,
        	title:'',
        	value:''
        },
        tableTables: [],
        tableFields: [],
        tableData:[],
        tableTypes: [{
        	value: 1,
        	label: "日报"
        },
        // {
        //     value:2,
        //     label:"周报"
        // },
        {
        	value: 3,
        	label: "月报"
        },
        {
        	value: 4,
        	label: "年报"
        }
        ],

				//数据分析相关变量
				numToTime:numToTime,
				analysisForm: {
					deviceType: 1,
					groupsCount: 1,
					sensorIds: [],
					dailyStartTime:"00:00:00",
					methods: [{
							value: 'max',
							label: '最大值',
							order: 1
						},
						{
							value: 'min',
							label: '最小值',
							order: 2
						},
						{
							value: 'spread',
							label: '差值',
							order: 4
						}
					],
					nowSensors:[],
					//methodsLabel:['最大值','最小值','平均值'],
					methodsValue: ['max', 'min', 'spread'],
					device: 0,
					period: '1h',
					sgroup_id: 0,
					value: '',
					start_time: ''

				},
				analysisTimeout: null,
				analysisGroups: [],
				analysisData: [],
				nowMethod: 'max',
				nowAnalysisSensor:0,
				analysisVarSensors: [],
				analysisType: 'table',
				loadingAnalysis: true,
				analysisTables: [],
				analysisFields: [],
				analysisMethods: [{
						value: 'max',
						label: '最大值',
						order: 1
					},
					{
						value: 'min',
						label: '最小值',
						order: 2
					},
					{
						value: 'mean',
						label: '平均值',
						order: 3
					},
					{
						value: 'spread',
						label: '差值',
						order: 4
					}
					// {
					//    value:'pass',
					//    label:'合格率(%)'
					// }
				],
				periods: [
					// {
					//    value:'1m',
					//    label:'1分钟'
					// },
					// {
					//    value:'5m',
					//    label:'5分钟'
					// },
					// {
					//    value:'30m',
					//    label:'30分钟'
					// },
					{
						value: '1h',
						label: '1小时'
					},
					// {
					//    value:'12h',
					//    label:'12小时'
					// },
					{
						value: '1d',
						label: '1天'
					},
					{
						value: '1m',
						label: '1月'
					}
				],
				//示功图相关变量
				powerLoading: false,
				myPowerChartLive: null,
				dataX: [],
				dataY: [],
				powerTimer: null,
				powerForm: {
					deviceType: 1,
					slavesCount: 1,
					sensorIds: [],
					device: 0,
					slave_id: 0,
					value: ''
				},
				powerTimeout: null,
				powerSlaves: [],
				//analysisData: [],
				powerVarSensors: [],
				powerFields: [],
				//上下线
				lineForm: {
					device: [],
					value: ''
				},
				lineData: [],
				//设备地图相关变量
				mapFullscreen: false,
				mapForm: {
					//show_type: 1,
					//equip_id: "",
					//time_range: [],
					state: 0
				},
				graspEquips: [],
				endPoint: [],
				startPoint: [],
				distance: 0,
				mapShowTypes: [{
						value: 1,
						label: '设备定位'
					},
					{
						value: 2,
						label: '设备轨迹'
					}
				],
				states: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '在线正常'
					},
					{
						value: 2,
						label: '在线报警'
					},
					{
						value: 3,
						label: '设备离线'
					}
				],
				pickerDateTimeOptions: {
					shortcuts: [{
							text: '最近10分钟',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 600 * 1000);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近30分钟',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 1800 * 1000);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近1小时',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近2小时',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 2);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近12小时',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 12);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近24小时',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24);
								picker.$emit('pick', [start, end]);
							}
						}
						//  {
						// text: '最近三天',
						// onClick(picker) {
						//   const end = new Date();
						//   const start = new Date();
						//   start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
						//   picker.$emit('pick', [start, end]);
						// }
						//  },
						//  {
						// 	text: '最近一周',
						// 	onClick(picker) {
						// 	  const end = new Date();
						// 	  const start = new Date();
						// 	  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						// 	  picker.$emit('pick', [start, end]);
						// 	}
						//  }
					]
				},
				// pickerMonthOptions: {
				//           shortcuts: [{
				//             text: '本月',
				//             onClick(picker) {
				//               picker.$emit('pick', [new Date(), new Date()]);
				//             }
				//           }, {
				//             text: '上月',
				//             onClick(picker) {
				//               const end = new Date();
				//               const start = new Date();
				//               start.setMonth(start.getMonth() - 1);
				// 			  end.setMonth(end.getMonth() - 1);
				//               picker.$emit('pick', [start, end]);
				//             }
				//           },{
				//             text: '最近两个月',
				//             onClick(picker) {
				//               const end = new Date();
				//               const start = new Date();
				//               start.setMonth(start.getMonth() - 1);
				//               picker.$emit('pick', [start, end]);
				//             }
				//           },
				// 		  {
				//             text: '最近三个月',
				//             onClick(picker) {
				//               const end = new Date();
				//               const start = new Date();
				//               start.setMonth(start.getMonth() - 2);
				//               picker.$emit('pick', [start, end]);
				//             }
				//           },
				// 		  {
				// 		    text: '最近六个月',
				// 		    onClick(picker) {
				// 		      const end = new Date();
				// 		      const start = new Date();
				// 		      start.setMonth(start.getMonth() - 5);
				// 		      picker.$emit('pick', [start, end]);
				// 		    }
				// 		  }]
				// },
				map: null,
				infoWindow: null,
				myIcon: null,
				equipdata: [],
				alarmSocket: null,
				platformAlarmTimer: null,
				markers: [],
				points: [],
				//组态相关变量
				viewList: [],
				drawList: [],
				viewForm: {
					view_id: '',
					stage_id: '',
					interval: 60
				},
				swiperTimer: null,
				isPlay: false, //是否正在图纸轮播
				start: 0,
				dialogSwiperVisible: false,
				isFullViewscreen: false,
				showView: false,
				fullList: false,
				nowView: '',
				//link:false,
				showVideo: false,
				camera1: '',
				camera2: '',
				camera3: '',
				camera4: '',
				cameras: [],
				cameraName: '',
				city: "西安",
				//nowtime: "",
				formLabelWidth: '1rem',
				baseurl: this.$baseurl,
				box: '',
				wsUrl: this.$wssUrl,
				Socket: null,
				loading_1: false,
				loading_2: true,
				loadingHistory: true,
				nowSensor: '',
				which: '',
				lineout: '',
				//groupId: 0,
				myChart:null,
				sateForm: {
					type: 1,
					sensor_name: '',
					equip_id: 0,
					slave_id: 0,
					value: '',
					id: 0,
					ext_vars: {}
				},
				threeSW: '',
				//keyLen: 3,
				//livedata: [],
				//livetimes: [],
				poid: 0,
				chart_2: null,
				hisdata: null,
				//myChartLive: {},
				dialogFormVisible: false,
				dialogFormVisible_2: false,
				dialogFormVisible_4: false,
				//outerVisible: false,
				innerVisible: false,
				// stateWidth_2:56,
				fullscreen: false,
				close: false,
				alarmEquips: [],
				alarmStr: '',

				//alarmStr: '',
				all: false,
				//历史数据分页器
				queryParams: {
					pageNo: 1,
					pageSize: 20,
					total: 0
				},
				//报警记录分页器
				queryParams_2: {
					pageNo: 1,
					pageSize: 20,
					total: 0
				},
				//操作记录分页器
				queryParams_3: {
					pageNo: 1,
					pageSize: 20,
					total: 0
				},
				//上下线记录分页器
				queryParams_4: {
					pageNo: 1,
					pageSize: 20,
					total: 0
				},

				//数据分析分页器,暂时不考虑分页
				// queryParams_5: {
				// 	pageNo: 1,
				// 	pageSize:20,
				// 	total: 0
				// },

				fields: [],
				groups: [{
					value: 0,
					label: '全部'
				}],
				timer: null,
				//nowTimer: null,
				alarmData: [],
				operData: [],
				pickerOptions: this.$pickerOptionsSimple,
				chartValue: [],
				chartItem: {},
				historyTimeout: null,
				//stopChoose:false,
				//model: 1,
				lineColor: [
					"#34c6ff",
					"#ffc34d",
					"#FF7400",
					"#0099ff",
					"#ff53Ad",
					"#BD2020", //#BD2020
					"#ffff00",
					"#55D55B",
					"#9f3ed5",
					"#009999"
				],
				history_chart: {
					//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
					// visualMap: [{
					//         show:true,
					//         type: 'continuous',
					//         seriesIndex: 0,
					//         min: 0,
					//         max: 400
					// }],
					//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
					title: {
						text: '历史时段数据曲线图',
						left: 'center', //center
						top: 5,
						textStyle: { //全局文字样式不包含它
							//color: "white"
						}
					},
					legend: {
						data: [],
						//left: 'left',
						left: '1%',
						top: 30
					},
					grid: {
						width: '92%',
						height: '76%',
						left: '4%',
						top: '12%'
					},
					toolbox: {
						show: true,
						right: 30,
						top: 5,
						iconStyle: {
							borderColor: "#666"
						},
						feature: {
							dataZoom: {
								show: false
							},
							// dataView: {
							// 	show:true,
							// 	readOnly: true
							// },
							// magicType: {    //这里是多数据点而且比较密集，不适合切换柱状图
							// 	type: ['line', 'bar']
							// },
							restore: {
								show: true,
								title: '还原'
							}, //刷新
							saveAsImage: {
								backgroundColor: '#fff',
								excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
							}
						}
					},
					dataZoom: [{
							id: 'dataZoomX',
							type: 'slider',
							show: true,
							start: 90,
							end: 100,
							filterMode: 'filter',
							fillerColor: '#eee',
							backgroundColor: '#ccc',
							handleStyle: {
								color: 'red'
							},
							bottom:'2%'
						}

					],
					tooltip: {
						trigger: 'axis',
						textStyle: {
							align: 'left' //提示框文字的对齐方式
						}
					},
					// textStyle: {
					// 	//color: "white"
					// 	textBorderColor:'#ff0000',
					// 	textBorderWidth:5,
					// },
					xAxis: {
						data: [],
						//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
						name: '时间',
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							//color:"#fff",
							//backgroundColor: '#111',
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							length: 6,
							// lineStyle: {
							// 	color: "white"
							// },
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						name: '值',
						axisLabel: {
							margin: 10,
							//color:"#fff",
							//backgroundColor: '#111'
							// color:"white"
						},
						axisTick: {
							length: 6
							// lineStyle: {
							// 	color: "white"
							// }
						}
					},
					series: []
				},

				analysis_chart: {
					title: {
						text: '数据分析曲线图',
						left: 'center', //center
						top: 5,
						textStyle: { //全局文字样式不包含它
							//color: "white"
						},
						show: false
					},
					legend: {
						data: [],
						//left: 'left',
						left: '1%',
						top: 30
					},
					grid: {
						width: '92%',
						height: '78%',
						left: '4%',
						top: 85
					},
					toolbox: {
						show: true,
						right: 30,
						top: 5,
						iconStyle: {
							borderColor: "#666"
						},
						feature: {
							dataZoom: {
								show: false
							},

							restore: {
								show: true,
								title: '还原'
							}, //刷新
							saveAsImage: {
								backgroundColor: '#fff',
								excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
							}
						}
					},
					dataZoom: [{
							id: 'dataZoomX',
							type: 'slider',
							show: true,
							start:0,
							end:50,
							filterMode: 'filter',
							fillerColor: '#eee',
							backgroundColor: '#ccc',
							handleStyle: {
								color: 'red'
							},
							top: 'bottom'
						}

					],
					tooltip: {
						trigger: 'axis',
						textStyle: {
							align: 'left' //提示框文字的对齐方式
						}
					},
					// textStyle: {
					// 	//color: "white"
					// 	textBorderColor:'#ff0000',
					// 	textBorderWidth:5,
					// },
					xAxis: {
						data: [],
						//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
						name: '时间',
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							//color:"#fff",
							//backgroundColor: '#111',
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							length: 6,
							// lineStyle: {
							// 	color: "white"
							// },
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						name: '值',
						axisLabel: {
							margin: 10,
							//color:"#fff",
							//backgroundColor: '#111'
							// color:"white"
						},
						axisTick: {
							length: 6
							// lineStyle: {
							// 	color: "white"
							// }
						}
					},
					series: []
				},
				dataset_option:{
				  legend: {},
				  tooltip: {},
				  dataset: {
				    source: [
				      ['product', '2015', '2016', '2017'],
				      ['Matcha Latte', 43.3, 85.8, 93.7],
				      ['Milk Tea', 83.1, 73.4, 55.1],
				      ['Cheese Cocoa', 86.4, 65.2, 82.5],
				      ['Walnut Brownie', 72.4, 53.9, 39.1]
				    ]
				  },
				  toolbox: {
				  	show: true,
				  	right: 30,
				  	top: 5,
				  	iconStyle: {
				  		borderColor: "#666"
				  	},
				  	feature: {
				  		dataZoom: {
				  			show: false
				  		},

				  		restore: {
				  			show: true,
				  			title: '还原'
				  		}, //刷新
				  		saveAsImage: {
				  			backgroundColor: '#fff',
				  			excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
				  		}
				  	}
				  },
				  dataZoom: [{
				  		id: 'dataZoomX',
				  		type: 'slider',
				  		show: true,
				  		start:0,
				  		end:50,
				  		filterMode: 'filter',
				  		fillerColor: '#eee',
				  		backgroundColor: '#ccc',
				  		handleStyle: {
				  			color: 'red'
				  		},
				  		bottom: '1px'
				  	}

				  ],
				  xAxis: { type: 'category' },
				  yAxis: {},
				  // Declare several bar series, each will be mapped
				  // to a column of dataset.source by default.
				  series: [{ type: 'bar',itemStyle:{color:"#BD2020"}}, { type: 'bar', itemStyle:{color:"#34c6ff"}}, { type: 'bar',itemStyle:{color:"#ffc34d"}}]
				},
				ch_option: {
					//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
					// visualMap: [{
					//         show:true,
					//         type: 'continuous',
					//         seriesIndex: 0,
					//         min: 0,
					//         max: 400
					// }],
					//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
					title: {
						text: '历史时段数据曲线图',
						left: '1%',
						top: 5,
						// textStyle: { //全局文字样式不包含它
						// 	color: "white"
						// }
					},
					grid: {
						width: '92%',
						height: '250px',
						left: '4%',
						top: 75
					},
					toolbox: {
						show: true,
						right: 30,
						iconStyle: {
							borderColor: "#aaa"
						},
						feature: {
							dataZoom: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: true
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {
								backgroundColor: '#fff',
								excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
							}
						}
					},
					dataZoom: [{
							id: 'dataZoomX',
							type: 'slider',
							show: true,
							start: 80,
							end: 100,
							filterMode: 'filter',
							fillerColor: '#eee',
							backgroundColor: '#ccc',
							handleStyle: {
								color: 'red'
							},
							top: '380px'
						}

					],
					tooltip: {
						trigger: 'axis'
					},
					// textStyle: {
					// 	color: "white"
					// },
					xAxis: {
						data: [],
						//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
						name: '时间',
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							length: 6,
							// lineStyle: {
							// 	color: "white"
							// },
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						name: '值',
						axisLabel: {
							margin: 10
							// color:"white"
						},
						axisTick: {
							length: 6
							// lineStyle: {
							// 	color: "white"
							// }
						}
					},
					series: [{
						name: '',
						type: 'line',
						//areaStyle: {},    //结合上面的面的xAxis形成曲线围成面积区域
						data: [],
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}, {
								type: 'min',
								name: '最小值'
							}]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},

						// itemStyle:{
						//    normal:{
						// 	  color:"#0b2c51"
						//    }
						// },

						// itemStyle: {
						//     normal: {
						//         //设置渐变效果
						//         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						//             offset: 0,
						//             color: "#ccc" //#90e0d0
						//         }, {
						//             offset: 1,
						//             color: "#0b2c51"
						//         }], false)
						//     }
						// },
						smooth: true
					}]
				},
				live_option: {
					title: {
						text: '实时同步数据曲线图',
						left: '1%',
						top: 10
						// textStyle: { //全局文字样式不包含它
						// 	color: "white"
						// }
					},
					grid: {
						width: '92%',
						height: '290px',
						left: '4%',
						top: 80,

					},
					// textStyle: {
					// 	color: "white"
					// },
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: [],
						name: '时间',
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							length: 6,
							// lineStyle: {
							// 	color: "white"
							// },
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						name: '值',
						axisLabel: {
							margin: 10
							// color:"white"
						},
						axisTick: {
							length: 6
							// lineStyle: {
							// 	color: "white"
							// }
						}
					},
					series: [{
						name: '',
						type: 'line',
						data: [],
						label: {
							show: true,
							formatter: '{c}'
						},
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}, {
								type: 'min',
								name: '最小值'
							}]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},
						smooth: true
					}]
				},
				//示功图曲线(双数值图)
				power_option: {
					title: {
						text: '示功图',
						left: '1%',
						top: 10
						// textStyle: { //全局文字样式不包含它
						// 	color: "white"
						// }
					},
					grid: {
						width: '90%',
						height: '360px',
						left: '6%',
						top: 80,

					},
					// textStyle: {
					// 	color: "white"
					// },
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						name: "X"
					},
					yAxis: {
						name: "Y"
					},
					series: [{
						name: '',
						type: 'line',
						data: [

						],
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}, {
								type: 'min',
								name: '最小值'
							}]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},
						smooth: true
					}, {
						name: '',
						type: 'line',
						data: [

						],
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}, {
								type: 'min',
								name: '最小值'
							}]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},
						smooth: true
					}]
				}
			}
		},
		components: {
			SensorRealData,
			SensorVarData
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},

		// beforeRouteEnter (to, from, next) {
		//     //不可以访问this;
		// 	//console.log(from.name);
		// 	next(vm => {
		// 	   vm.fromPage=from.name;
		// 	   vm.fromOrder = from.meta.order;
		// 	   console.log(vm.fromPage);
		// 	})
		// },

		created() {
			var that = this;
      this.nowMenu = JSON.parse(localStorage.getItem("monitorMenu"));
      console.log(this.nowMenu);
			this.fromPage = this.$route.query.fromPage;
			this.fromOrder = this.$route.query.fromOrder;
			this.getProduct();
			this.isFirst = true;
			this.isShow = Number(localStorage.getItem("productShow")) == 1 ? true : false;
		    localStorage.removeItem('from');
			this.sysName = localStorage.getItem("compName");
			if (this.Socket) {
				this.Socket.close();
			}
			this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.historyForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.alarmForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.operForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.tableForm.value = that.getNowFormatDate();
      this.analysisForm.value = [that.getNowFormatDate(),that.getNowFormatDate()];
			//this.lineForm.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			//this.form.type=this.types[0].value;
			//设备轨迹默认时间范围当日0点到当前时间
			//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
		},

		mounted() {
			var that = this;
			//console.log(this.getNowHour());
			//console.time('initialize');
			//this.$refs.page.style.height = window.innerHeight + 'px';

			if (window.screen.height == 1440) {
				this.history_chart.grid.height = '85%';
				this.analysis_chart.grid.height = '85%';
			} else if (window.screen.height == 900) {
				this.history_chart.grid.height = '75%';
				this.analysis_chart.grid.height = '75%';
			} else if (window.screen.height == 768) {
				this.history_chart.grid.height = '70%';
				this.analysis_chart.grid.height = '70%';
			} else if (window.screen.height == 640) {
				this.history_chart.grid.width = '90%';
				this.history_chart.grid.height = '64%';
				this.history_chart.grid.top = 105;
				this.analysis_chart.grid.width = '90%';
				this.analysis_chart.grid.height = '64%';
				this.analysis_chart.grid.top = 105;
			}

			setTimeout(function(){
			    that.getFirstDefault();
				that.optionNodes=document.querySelectorAll(".el-tree-node__content");
				//console.log(that.optionNodes);
				for(let e=0,len2=that.optionNodes.length;e<len2;e++){
					//console.log(that.optionNodes[e].children[0].classList);
					if(that.optionNodes[e].children[1].innerText==that.optionName){

						that.optionNodes[e].children[0].style.color="#409eff";
						that.optionNodes[e].children[1].style.color="#409eff";
					}else{
						that.optionNodes[e].children[0].style.color="#222";
						that.optionNodes[e].children[1].style.color="#222";
					}
					//let classAll=Array.from(that.optionNodes[e].children[0].classList);
					//判断是否是叶子节点，以隐藏前面的三角图标
					// if(classAll.indexOf('is-leaf')>=0){
					// 	//直接去掉就没有了退格，所以做隐去处理；
					// 	//that.optionNodes[e].children[0].removeAttribute('class','el-tree-node__expand-icon');
					// 	that.optionNodes[e].children[0].style.color="transparent";
					// 	that.optionNodes[e].children[0].style.marginLeft="-10px";

					// }
				}
        that.fullScreenThree();
			},1000)

			this.getToken();
			//console.timeEnd('initialize');
			this.tokenTimer = setInterval(function() {
				that.getToken();
			}, 10200000);
		},

		methods: {
      fullScreenThree() {
      	var that = this;
      	this.screenThree =
      		document.fullScreen ||
      		document.mozFullScreen ||
      		document.msFullScreen ||
      		document.webkitIsFullScreen;
      	var content = document.documentElement;
      	if (!this.screenThree) {
      		//进入全屏,多重短路表达式
      		(content.requestFullscreen && content.requestFullscreen()) ||
      		(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
      		(content.webkitRequestFullscreen &&
      			content.webkitRequestFullscreen()) ||
      		(content.msRequestFullscreen && content.msRequestFullscreen());
      		this.screenThree = true;
      		// that.$message({
      		// 	type: "info",
      		// 	dangerouslyUseHTMLString: true,
      		// 	duration: 5000,
      		// 	offset: 400,
      		// 	message: "<p style='color:#222;'>如需还原请点击<span style='color:red;'>全屏切换</span>按钮,如需进入浏览器全屏请按键盘<span style='color:red;'>ESC</span>键！</p>"
      		// });
      	} else {
      		//CancelFullScreen?document.mozCancelFullScreen():
      		document.exitFullscreen ?
      			document.exitFullscreen() :
      			document.mozCancelFullScreen ?
      			document.mozCancelFullScreen() :
      			document.msExitFullScreen ?
      			document.msExitFullScreen() :
      			document.webkitExitFullscreen ?
      			document.webkitExitFullscreen() :
      			"";
      		this.screenThree = false;
      	}
      },
			getNowTime() {
				//输出格式为：年-月-日 时:分:秒
				//var a = ["日", "一", "二", "三", "四", "五", "六"];
				var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds();
				// var wk = date.getDay();
				// var wks = "星期" + a[wk] + "•";
				// return Y + M + D + wks + h + m + s;
				return Y + M + D + h + m + s;
			},
			//获取当前小时
		    getNowHour(){
				var date = new Date();
				return date.getHours();
			},

			//获取当前年月日或前几日或后几日的日期并转换格式
			//days   推延天数，before下days=1,就是当日;after下days=0就是当日
			//type   before向前推，after向后推
			getBeforeAfterDate(days=1,type="after") {
				//时间差ms，before下包含当日，所以要减1，不然多一天
				var times=type=="before"?(days-1)*3600*24*1000:days*3600*24*1000;
				var today = new Date().getTime();
				var date = type=="before"?new Date(today-times):new Date(today+times);
				var seperator1 = "-";
				// var seperator2 = ":";
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				//var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
			    return currentdate;
			},

			//默认月份，三个月的算法
			getThreeMonth() {
				const end = new Date();
				var endY = end.getFullYear() + '-';
				var endM = (end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1);
				const start = new Date();
				var startY = start.getFullYear() + '-';
				var startM = (start.getMonth() - 1 < 10 ? '0' + (start.getMonth() - 1) : start.getMonth() - 1);
				//return startY+startM+"~"+endY+endM;
				return [startY + startM, endY + endM];
			},

			//项目或公共函数
			getProduct() {
				var that = this;
				this.options = [];
				this.$http({
					method: 'post',
					async: false,
					url: 'api/product/all',
					data: {}
				}).then(res => {
					//console.log(res.data.data)
					if (res && res.data.result == "success") {
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							if (res.data.data[i].equips_count || res.data.data[i].views_count || res.data.data[i]
								.cameras_count) {
								let option = {
									value: res.data.data[i].id,
									label: res.data.data[i].product_name,
									equips_count: res.data.data[i].equips_count,
									views_count: res.data.data[i].views_count,
									cameras_count: res.data.data[i].cameras_count
								}
								this.options.push(option);
							}

						}
						if(this.options.length){
							this.optionId = this.options[0].value;
							console.log(this.optionId);
							this.optionName = this.options[0].label;
							localStorage.setItem("optionId", that.optionId);
						}
					}
				}).catch(error => {
					console.log(error);
				});

			},

			//自定义菜单由项目控制改为用户控制之后
			getFirstDefault(){
				for (let i = 0, len = this.nowMenu.length; i < len; i++) {
					if (this.nowMenu[i].isIndex == 1) {
						this.topTab = this.nowMenu[i].key;
						this.menuActive = this.nowMenu[i].key;
						break;
					}
				}
				if (this.topTab == 'view') {
					this.getViewAll(this.optionId);
				}
				this.getEquip(this.optionId);
			},

			getDefaultTab() {

			},

			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},

			changeColor(event) {
				console.log(event);
			},
			async handleNodeClick(data, node, event) {
				var that = this;
				this.optionId = data.value;
				localStorage.setItem("optionId", data.value);
				this.isFirst = false;
				// var sibling = event.$el.parentNode.children;
				// for (var i = 0; i < sibling.length; i++) {
				// 	sibling[i].style.color = "#222";
				// }
				// event.$el.style.color = "#409eff";
				this.devices = [];
				this.lookAll = false;
				if (this.Socket) {
					this.Socket.close();
					clearInterval(that.timer);
				}
				if (this.map) {
					this.map.destroy();
				}
				this.historyForm.sgroup_id = 0;
				this.historyForm.sensorIds = [];
				this.analysisForm.sgroup_id = '';
				this.analysisData = [];
				this.analysisFields = [];
				this.analysisVarSensors = [];
				this.analysisForm.sensorIds = [];
				this.historyType = 'table';
				this.varSensors = [];
				//this.mapForm.show_type = 1;
				//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
				//this.productInfo.hasImage = data.hasImage;
				this.showViewTab = Number(data.views_count) > 0 ? true : false;
				this.showCameraTab = Number(data.cameras_count) > 0 ? true : false;
				await this.getEquip(this.optionId);
				//this.getEquipAll(this.optionId);
				this.alarmForm.device = [];
				this.operForm.device = [];
				this.lineForm.device = [];

				this.chooseTab(that.topTab);

				for(let i=0;i<this.optionNodes.length;i++){
					this.optionNodes[i].children[0].style.color="#222";
					this.optionNodes[i].children[1].style.color="#222";
					let classAll=Array.from(that.optionNodes[i].children[0].classList);

				}
				let classAll=Array.from(event.$el.firstElementChild.children[0].classList);
				event.$el.firstElementChild.children[0].style.color="#409eff";
				event.$el.firstElementChild.children[1].style.color="#409eff";

			},

			// isDisable(data,node){
			// 	return data.disabled;
			// },
			//根据浏览器是否有书签栏，修正容器尺寸
			changeContainSize(tab, time) {
				var that = this;
				if (tab == 'data') {
					setTimeout(function() {
						var oldHeight = that.$refs.deviceData.offsetHeight;
						that.$refs.deviceData.style.cssText += ";height:" + (oldHeight + 34) +
							"px!important";

					}, time)
				}
				if (tab == 'view') {
					setTimeout(function() {
						var oldHeight = that.$refs.mainIframe.offsetHeight;
						that.$refs.mainIframe.style.cssText += ";height:" + (oldHeight + 30) +
							"px!important";
						//that.$refs.mainIframe.style.height = (oldHeight + 34) +'px';
					}, time)
				}
				if (tab == 'map') {
					setTimeout(function() {
						var oldHeight = that.$refs.content.offsetHeight;
						var newHeight = oldHeight + 30;
						that.$refs.content.style.cssText += ";height:" + newHeight +
							"px!important";

					}, time)
				}
				if (tab == 'image') {
					setTimeout(function() {
						var oldHeight = that.$refs.productImage.offsetHeight;
						var newHeight = oldHeight + 30;
						that.$refs.productImage.style.cssText += ";height:" + newHeight +
							"px!important";

					}, time)
				}
			},

			//实时报警全局函数,这里只用于更换图标；
			// getAllAlarmSocket() {
			// 	var that = this;
			// 	//console.log("homeAlarm");
			// 	this.alarmSocket = new WebSocket(this.wsUrl);
			// 	if (this.alarmSocket.readyState != WebSocket.OPEN) {
			// 		this.alarmSocket.onopen = function() {
			// 			var pingData = {
			// 				action: "alarm",
			// 				data: {
			// 					user_id: localStorage.getItem('at_userId'),
			// 					token: localStorage.getItem("attoken")
			// 				}
			// 			};
			// 			that.alarmSocket.send(JSON.stringify(pingData));
			// 			that.platformAlarmTimer = setInterval(function() {
			// 				that.alarmSocket.send(JSON.stringify(pingData));
			// 			}, 30000);
			// 			console.log('连接成功')
			// 		};
			// 	};
			// 	this.alarmSocket.onerror = this.onAlarmError;
			// 	this.alarmSocket.onmessage = this.onAlarmMessage;
			// },

			// onAlarmError(e) {
			// 	var that = this;
			// 	//console.log("连接失败，尝试重连")
			// 	this.alarmSocket.close();
			// 	clearInterval(that.platformAlarmTimer);
			// 	//this.getALLAlarm();
			// },


			// onAlarmMessage(msg) {
			// 	var that = this;
			// 	var messageData = JSON.parse(msg.data);
			// 	//console.log(messageData);
			// 	if (messageData.result == "success" && this.isObject(messageData.data)) {
			// 		var liveDatas = messageData.data;
			// 		//console.log(liveDatas);
			// 		var icon = "";
			// 		if (liveDatas.status == 'alarm') { //报警
			// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
			// 		} else if (liveDatas.status == 'connect' || liveDatas.status == 'online') {
			// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
			// 		} else if (liveDatas.status == 'disconnect' || liveDatas.status == 'powerdown') {
			// 			icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
			// 		}
			// 		for (let i = 0, len = this.equipdata.length; i < len; i++) {
			// 			if (this.equipdata[i].id == liveDatas.equip_id) {
			// 				this.equipdata[i].stateIcon = icon;
			// 				for (let m = 0, len2 = this.markers.length; m < len2; m++) {
			// 					if (this.markers[m].w.label.content == liveDatas.equip_name) {
			// 						this.markers[m].setIcon(new AMap.Icon({
			// 							size: [26, 32],
			// 							imageSize: [26, 32],
			// 							image: icon
			// 						}));
			// 						break;
			// 					}
			// 				}
			// 				break;
			// 			}
			// 		}
			// 	} else {
			// 		console.log(messageData.message);
			// 	}
			// },

			//停止所有视频函数
			stopVideo() {
				if (this.player1) {
					this.player1.stop();
				}
				if (this.player2) {
					this.player2.stop();
				}
				if (this.player3) {
					this.player3.stop();
				}
				if (this.player4) {
					this.player4.stop();
				}
			},

			chooseTab(tab) {
				var that = this;
				if (tab != "data" && this.Socket) {
					this.Socket.close();
					clearInterval(that.timer);
				}
				if (tab != "map" && this.alarmSocket) {
					this.alarmSocket.close();
					clearInterval(that.platformAlarmTimer);
				}
				if (tab != 'video') {
					this.stopVideo();
				}
				this.myChart = null;
				clearInterval(that.powerTimer);
				this.power_option.series[0].data = [];
				this.myPowerChartLive = null;

				if (this.devices.length) {
					switch (tab) {
						case 'data':
							if (this.lookAll) {
								this.getAllLiveData();
							} else {
								this.getManyLiveData(this.form.device);
							}
							break;
						case 'view':
							this.getViewAll(this.optionId);
							break;
						case 'video':
							this.getCameraAll(this.optionId);
							setTimeout(function() {
								that.showCamera();
							}, 1000)
							break;
						case 'history':
							this.queryParams.pageNo = 1;
							if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
								this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, this.historyForm
									.sgroup_id, this.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
							} else {
								this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, 0, this.historyForm
									.sensorIds.join(','), this.historyForm.value.join('~'));
							}
							break;
						case 'alarm':
							this.queryParams_2.pageNo = 1;
							this.getAlarm(1, that.queryParams_2.pageSize, [], that.alarmForm.value.join('~'));
							break;
						case 'log':
							this.queryParams_3.pageNo = 1;
							this.getLogs(1, that.queryParams_3.pageSize, 0, that.operForm.value.join('~'));
							break;
						case 'statement':
						  this.getAnalysisTable(this.optionId);
							break;
            case 'analysis':
              if (this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1) {
            		this.getAnalysisSensorsAll(this.analysisForm.sgroup_id);
            	} else {
            		this.getAnalysisSensorsAll(0);
            	}
            	break;
						case 'power':
							this.getPower();
							break;
						case 'connect':
							this.getLines(1, that.queryParams_4.pageSize, 0, that.lineForm.value.join('~'));
							break;
						case 'map':
							//this.mapForm.show_type = 1;
							//this.mapForm.time_range = [that.getNowFormatDate() + " 00:00:00", that.getNowTime()];
							this.getEquipMap(this.optionId, '', '', true);
							//this.getAllAlarmSocket();
							break;
							// case 'image':
							// 	this.showImage(this.optionId);
							// 	break;

					}
				} else {
					if (tab == 'map') {
						this.showMap();
					} else if (tab == 'video') {
						this.getCameraAll(this.optionId);
						setTimeout(function() {
							that.showCamera();
						}, 1000);
					} else if (tab == 'view') {
						this.getViewAll(this.optionId);

					}else if(tab == 'statement'){
						this.getAnalysisTable(this.optionId);
					}
				}
				// if (window.screen.availHeight - window.innerHeight<=80) {
				// 	this.changeContainSize(tab, 1000);
				// }

			},

			beforeLeave(newTab, oldTab) {
				//this.topTab=newTab;
				//this.chooseTab(this.topTab);
				if (oldTab == 'map') {
					this.$notify.closeAll();
				}
			},

			mainClick(el) {
				this.topTab = el.name;
				this.chooseTab(this.topTab);
			},

			getNowFormatDate() { //获取当前年月日
				var date = new Date();
				var seperator1 = "-";
				// var seperator2 = ":";
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

				return currentdate;
			},

			goExit(type) {
				var that = this;
				this.willExit = true;
				//document.removeEventListener("fullscreenchange",that.stopEsc,false);
				//var content = this.$refs.page;
				clearInterval(that.timer);
				if (this.Socket) {
					this.Socket.close();
					this.Socket.onerror = null;
				}
				localStorage.setItem("from", "mainData");
				this.showView = false;
				this.$message.closeAll();
				this.$notify.closeAll();
				if (this.screenThree || this.mapFullscreen || this.isFullViewscreen) {
					document.exitFullscreen ?document.exitFullscreen() :
					document.mozCancelFullScreen ?document.mozCancelFullScreen() :
					document.webkitExitFullscreen ?document.webkitExitFullscreen() :'';
					this.mapFullscreen = false;
					this.isFullViewscreen = false;
					this.screenThree = false;
				}
				if(type=='control'){
					if(this.fromPage=='Login' || !this.fromPage){
						this.$router.push({
							path: '/device',
							name: 'device',
							component: 'device'
						})
						localStorage.setItem("indexPath",'7-1');
					}else{
						this.$router.push({
							path: '/' + that.fromPage,
							name: that.fromPage,
							component: that.fromPage
						})
						localStorage.setItem("indexPath",this.fromOrder);
					}
				}else{
					this.$router.push({
					    name: 'Login',
					    path: '/',
					    component: 'Login'
					});
					localStorage.clear();
				}
			},

			goScreenTotal() {
				this.$router.push({
					path: '/showScreen',
					name: 'showScreen',
					component: 'showScreen'
				});
				this.stopVideo();
			},

			getEquipAll(id) {
				var that = this;
				this.alarmEquips = [];
				//this.$notify.closeAll();
				this.$http({
					method: 'post',
					url: 'api/equip/all',
					data: {
						"product_id": id,
						"run_mode": 1,
						"is_alarm": 1
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						//console.log(res.data.data);
						if (res.data.data.length) {
							for (let i = 0, len = res.data.data.length; i < len; i++) {
								if (res.data.data[i].is_on == 1 && res.data.data[i].is_alarm == 1) {
									this.alarmEquips.push(res.data.data[i].equip_name);
								}
							}

						}
						// if (this.alarmEquips[0]) {
						// 	this.alarmStr = "报警提示:当前项目以下设备:" + this.alarmEquips.join(',') + "正在报警，请及时处理!";
						// 	var msg = new SpeechSynthesisUtterance(that.alarmStr);
						// 	if(localStorage.getItem("alarmVoice")=="true"){
						// 		window.speechSynthesis.speak(msg);
						// 	}
						// 	this.$notify({
						// 		title: '当前项目报警提示:',
						// 		dangerouslyUseHTMLString: true,
						// 		customClass: 'notice',
						// 		message: '<div style="display:block;text-align:left;width:200px;height:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;color:#666;">以下设备:</br><span style="color:#d92027;font-weight:700;">' +
						// 			that.alarmEquips.join('</br>') + '</span></br>正在报警，请及时处理!<span style="display:block;color:deepskyblue;cursor:pointer;">点击开启/关闭语音</span></div>',
						// 		duration:6000,
						// 		position:'bottom-left',
						// 		offset: 10,
						// 		onClose: function() {
						// 			//window.speechSynthesis.cancel(msg);
						// 		},
						// 		onClick:function() {
						// 			if(that.isPlay){
						// 			    window.speechSynthesis.cancel(msg);
						// 				localStorage.setItem("alarmVoice",false);
						// 			}else{
						// 				window.speechSynthesis.speak(msg);
						// 				localStorage.setItem("alarmVoice",true);
						// 				//window.speechSynthesis.resume();
						// 			}
						// 			that.isPlay=!that.isPlay;
						// 		},
						// 	});
						// 	//that.alarmStr = "当前项目以下设备:" + that.alarmEquips.join(',') + "正在报警，请及时处理!";
						// } else {
						// 	//that.alarmStr = "该项目下暂无设备报警!"
						// }
					}

				}).catch(error => {

					console.log(error);
				});
			},

			getEquip(id) {
				var that = this;
				this.devices = [];
				this.$http({
					method: 'post',
					url: 'api/equip/all',
					data:  {
						"product_id": id,
						"run_mode": 1,
						"user_id": localStorage.getItem("at_userId")
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							for (let i = 0, len = res.data.data.length; i < len; i++) {
								let device = {
									value: res.data.data[i].id,
									label: res.data.data[i].equip_name,
									type: res.data.data[i].type,

									groupsCount: res.data.data[i].groups_count
									//disabled:res.data.data[i].slaves_count?false:true
								}
								this.devices.push(device);
							}
						//console.log(this.devices);
						} else { //这是判断只有组态没有设备的情况
							this.equipDataTree = [];
							this.form.device = '';
							this.$refs.deviceData.innerHTML = "";
							this.cameras = [];
							this.historyData = [];
							this.fields = [];
							this.historyForm.device = '';
							this.analysisData = [];
							this.analysisFields = [];
							this.analysisForm.device = '';
							this.alarmData = [];
							this.alarmForm.device = [];
							this.operData = [];
							this.operForm.device = [];
							this.lineData = [];
							this.lineForm.device = [];
							return false;
						}
						if (this.devices[0]) {
							this.form.device = [that.devices[0].value];
							if (this.topTab == 'data') {
								this.getManyLiveData(this.form.device);
								//设备监控初始赋值,
								//2022年4月28日改为全部
								//this.getAllLiveData(false);
							}

							//历史数据初始赋值
							this.historyForm.device = this.devices[0].value;
							this.historyForm.deviceType = this.devices[0].type;
							this.historyForm.groupsCount = this.devices[0].groupsCount;
							//数据分析初始赋值
							this.analysisForm.device = this.devices[0].value;
							this.analysisForm.deviceType = this.devices[0].type;
							this.analysisForm.groupsCount = this.devices[0].groupsCount;
							if (this.devices[0].type == 1 && this.devices[0].groupsCount > 1) {
								//提前获取历史数据所需的分组数据；
								this.getHistoryGroups(this.historyForm.device);
								//提前获取数据分析所需的分组数据；
								this.getAnalysisGroups(this.analysisForm.device);
							}
							//项目可配菜单后添加
							if (this.topTab != 'data' && this.topTab != 'view' && this.isFirst) {
								this.chooseTab(this.topTab)
							}
							return true;

						} else {
							this.form.device = "暂无设备";
							return false;
						}
					}

				}).catch(error => {
					console.log(error);
					return false;
				});

			},

			//以下是设备监控相关函数
			getSensors(id) {
				var that = this;
				this.Socket = new WebSocket(this.wsUrl);
				if (this.Socket.readyState != WebSocket.OPEN) {
					this.Socket.onopen = function() {
						var pingData = {
							action: "ping",
							data: {
								user_id: localStorage.getItem('at_userId'),
								equip_id: id.join(','),
								token: localStorage.getItem("attoken")
							}
						};

						that.Socket.send(JSON.stringify(pingData));
						that.refreshManyDeviceData(id);
						that.timer = setInterval(function() {
							that.Socket.send(JSON.stringify(pingData));
						}, 30000);

						console.log('连接成功')
					};
				};
				this.Socket.onerror = this.onError;
				this.Socket.onmessage = this.onMessage;
			},

			refreshManyDeviceData(id) {
				if (!id) {
					this.$refs.deviceData.innerHTML = "";
					return false;
				}
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/equip/refresh',
					data: {
						"id": id.join(','),
						"mode": 'all'
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						console.log("数据刷新成功")
					} else {
						//阻止自动刷新的失败提示；
						this.$message.closeAll();
					}
				}).catch(error => {

					console.log(error)
				});
			},

			refreshOneDeviceData(id, type) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/equip/refresh',
					data: {
						"id": id,
						"mode": type == 1 ? 'real' : 'vars'
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '此设备数据已刷新!',
							type: 'info',
							duration: 2000,
							offset: 350,
							center: true
						});
						//console.log("数据刷新成功")
					}
				}).catch(error => {

					console.log(error)
				});
			},

			refreshOneSlaveData(id, slave, type) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/equip/refresh',
					data: {
						"id": id,
						"slave_id": slave,
						"mode": type == 1 ? 'real' : 'vars'
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						console.log("数据刷新成功")
					}
				}).catch(error => {

					console.log(error)
				});
			},

			refreshFun(second = 1000, item, type = 1) {
				var that = this;
				setTimeout(function() {
					if (item.slave_id) {
						that.refreshOneSlaveData(item.equip_id, item.slave_id, type);
					} else {
						that.refreshOneDeviceData(item.equip_id, type);
					}
				}, second);
			},

			//获取当前选择的设备的结构树
			getManyLiveData(devices) {
				var that = this;
				if (!devices.length) {
					this.$message({
						message: '你还没有选择设备，请先选择!',
						type: 'error',
						duration: 2000,
						offset: 300,
						center: true
					});
					return
				}
				this.equipDataTree = [];
				this.allExpand = true;
				if (this.Socket) {
					this.Socket.close();
					clearInterval(that.timer);
				}
				this.$http({
					method: 'post',
					url: 'api/equip/batchView',
					data: {
						"id": devices.join(','),
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.equipDataTree = Array.from(res.data.data);
						for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
							this.$set(this.equipDataTree[i], 'visible', true);
							if (this.equipDataTree[i].type == 1 && this.equipDataTree[i].groups_count > 1) {
								var groups = [{
									id: 0,
									sgroup_name: '全部'
								}, ...that.equipDataTree[i].groups];
								this.$set(this.equipDataTree[i], 'groupList', groups);
								//this.equipDataTree[i].slaves.unshift({id:0,slave_name:'全部'});
								this.$set(this.equipDataTree[i], 'oneDeviceForm', {
									sgroup_id: 0,
									data_type: that.dataTypes[0].value
								})
								this.equipDataTree[i].oneDeviceForm.sgroup_id = this.equipDataTree[i].groupList[0]
									.id;
							} else {
								this.$set(this.equipDataTree[i], 'oneDeviceForm', {
									sgroup_id: '',
									data_type: that.dataTypes[0].value
								})
							}

						}
						this.equipDataTree[0].visible = true;
						this.already = true;
						this.getSensors(devices);
						//console.log(this.equipDataTree);
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {

					console.log(error)
				});
			},

			//获取所有设备的数据结构
			getAllLiveData() {
				this.lookAll = true;
				this.form.device = [];
				var devices = [];
				for (let i = 0, len = this.devices.length; i < len; i++) {
					devices.push(this.devices[i].value)
				}
				this.getManyLiveData(devices);
				//this.deviceAll = true;
				//this.allExpand = all;

			},

			// changeDataDevice(devices){
			// 	this.deviceAll = devices.length==this.devices.length?true:false;
			// },

			showAllDevice(allShow) {
				this.allExpand = !this.allExpand;
				for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
					this.equipDataTree[i].visible = allShow;
				}
			},

			showOneDevice(index, oneShow) {
				this.equipDataTree[index].visible = oneShow;
				if (this.equipDataTree.every(function(item) {
						return item.visible == true;
					})) {
					this.allExpand = true;
				} else if (this.equipDataTree.every(function(item) {
						return item.visible == false;
					})) {
					this.allExpand = false;
				}
				this.$forceUpdate();

			},

			changeDataType(type, i) {
				this.equipDataTree[i].oneDeviceForm.data_type = type;
				this.equipDataTree[i].visible = true;
				this.$forceUpdate();
			},

			changeDataGroup(i) {
				this.equipDataTree[i].visible = true;
			},

			// closeOutside() {
			// 	this.Socket.close();
			// 	//this.outerVisible = false;
			// },
			onError(e) {
				var that = this;
				console.log("连接失败，尝试重连")
				this.Socket.close();
				clearInterval(that.timer);
				//this.getSensors(this.form.device);

			},

			isObject(obj) {
				return obj.constructor.toString().indexOf("Object") > -1;
			},
			onMessage(msg) {
				var that = this;
				var messageData = JSON.parse(msg.data);
				if (messageData.result == "success" && this.isObject(messageData.data)) {
					var liveDatas = messageData.data;
					for (let i = 0, len = this.equipDataTree.length; i < len; i++) {
						if (liveDatas.equip.id == this.equipDataTree[i].id) {
							if (liveDatas.equip) {
								this.equipDataTree[i].is_on = liveDatas.equip.is_on;
								this.equipDataTree[i].is_alarm = liveDatas.equip.is_alarm;
								//this.equipDataTree[i].last_data_time = liveDatas.equip.last_data_time;
								// if(this.equipDataTree[i].is_alarm==1){
								// 	this.$notify({
								// 		title: '警告',
								// 		message: '设备:'+that.equipDataTree[i].equip_name+',正在报警，请及时处理!',
								// 		type: 'warning',
								// 		duration: 6000,
								// 		offset: 150
								// 	});
								// }
								if (liveDatas.equip.is_on != 1) {
									this.$notify({
										title: '警告',
										message: '设备:' + that.equipDataTree[i].equip_name +
											'连接中断,若为设备重启将马上恢复,否则请检查设备连接!',
										type: 'warning',
										duration: 6000,
										offset: 150
									});
									//若设备突然中断离线，清空正在显示的数值；
									if (that.equipDataTree[i].type == 1) {
										for (let n = 0, len = that.equipDataTree[i].groups.length; n < len; n++) {
											for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.real.length; m <
												len2; m++) {
												that.equipDataTree[i].groups[n].sensors.real[m].value = '';
											}
											for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.vars.length; m <
												len2; m++) {
												that.equipDataTree[i].groups[n].sensors.vars[m].value = '';
											}

										}
									} else {
										for (let n = 0, len = that.equipDataTree[i].sensors.real.length; n < len; n++) {
											that.equipDataTree[i].sensors.real[n].value = '';
										}
										for (let n = 0, len = that.equipDataTree[i].sensors.vars.length; n < len; n++) {
											that.equipDataTree[i].sensors.vars[n].value = '';
										}
									}
								}

							}
							if (liveDatas.data && liveDatas.equip) {
								if (that.box == "live" && (liveDatas.data[that.poid] != undefined) && (liveDatas.data[that
										.poid] != null)) {
									that.live_option.series[0].data.push(liveDatas.data[that.poid]);
									that.live_option.xAxis.data.push(liveDatas.time.substr(5, 5) + "\n" + liveDatas.time
										.substr(11));
									//that.live_option.series[0].data = that.livedata;
									//that.live_option.xAxis.data = that.livetimes;
									if ((that.live_option.series[0].data != []) && (that.live_option.xAxis.data != [])) {
										var chart_2 = that.$refs.myChartLive;
										var myChartLive = echarts.init(chart_2);
										// myChartLive.setOption(that.live_option);
										myChartLive.setOption(that.live_option);
										that.loading_2 = false;
										window.addEventListener("resize", () => {
											myChartLive.resize();
										})
									} else {
										that.lineout = "live";
									}
								}
								if (that.equipDataTree[i].type == 1) {
									for (let n = 0, len = that.equipDataTree[i].groups.length; n < len; n++) {
										for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.real.length; m <
											len2; m++) {
											for (let key in liveDatas.data) {
												if (that.equipDataTree[i].groups[n].sensors.real[m].id == key) {
													that.equipDataTree[i].groups[n].sensors.real[m].value = liveDatas.data[
														key];
												}

											}

										}
										if (that.equipDataTree[i].groups[n].sensors.vars && (that.equipDataTree[i].groups[
												n].sensors.vars.length)) {
											for (let m = 0, len2 = that.equipDataTree[i].groups[n].sensors.vars.length; m <
												len2; m++) {
												for (let key in liveDatas.data) {
													if (that.equipDataTree[i].groups[n].sensors.vars[m].id == key) {
														that.equipDataTree[i].groups[n].sensors.vars[m].value = liveDatas
															.data[key];
													}

												}

											}
										}
									}
									//this.$forceUpdate();
								} else {
									for (let n = 0, len = that.equipDataTree[i].sensors.real.length; n < len; n++) {
										for (let key in liveDatas.data) {
											if (that.equipDataTree[i].sensors.real[n].id == key) {
												that.equipDataTree[i].sensors.real[n].value = liveDatas.data[key];
											}

										}
									}
									if (that.equipDataTree[i].sensors.vars && (that.equipDataTree[i].sensors.vars
											.length)) {
										for (let n = 0, len = that.equipDataTree[i].sensors.vars.length; n < len; n++) {
											for (let key in liveDatas.data) {
												if (that.equipDataTree[i].sensors.vars[n].id == key) {
													that.equipDataTree[i].sensors.vars[n].value = liveDatas.data[key];
												}
											}
										}
									}
								}
							}
						}
					}



				} else {
					console.log(messageData.message);
				}
			},

			onClose(e) {
				this.Socket.close();
				console.log('连接关闭')
			},

			changeVal(item, type) {
				var that = this;
				this.$prompt('您正在改写' + '<span style="color:red;">' + item.sensor_name + '</span>' + '的值,请慎重操作!', '写值操作', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: item.show_type == 2 ? /^-{0,1}\d+(\.\d+)?$/ : '',
					dangerouslyUseHTMLString: true,
					inputPlaceholder: item.value,
					inputErrorMessage: item.show_type == 2 ? '设值错误，值必须为数字！' : ''
				}).then(({
					value
				}) => {
					if (item.show_type == 2 && (value === '' || value === null)) {
						this.$message({
							type: 'error',
							offset: 300,
							message: '数值型修改值不能为空！',
							center: true
						});
						return false;
					}
					this.$http({
						method: 'post',
						url: 'api/sensor/write',
						data: {
							"id": item.id,
							"value": value

						}
					}).then(res => {
						if (res && res.data.result == "success") {
							item.value = value;
							that.$message({
								message: '恭喜,写入数据点成功!',
								type: 'success',
								center: true
							});
						}
						// console.log(that.pointdata[0].icon)
					}).catch(error => {
						console.log(error);
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消设值!'
					});

				});
			},

			changeState(item, type, event) {
				//event.stopPropagation();
				//event.stopImmediatePropagation();
				let state = "";
				state = event.target.checked ? '打开' : '关闭';
				//state = item.value==1 ? '打开' : '关闭';
				let newValue = state == '打开' ? 1 : 0;
				this.$confirm('您确定要' + state + '当前开关吗？' + state + '后,将无法撤销,是否确认?', state + item.sensor_name, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						url: 'api/sensor/write',
						data: {
							"id": item.id,
							"value": newValue
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								message: '恭喜,修改数据点状态成功!',
								type: 'success',
								center: true
							});
						} else {
							this.refreshFun(1000, item, type);
						}

					}).catch(error => {
						console.log(error)
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消修改,将自动恢复！'
					});
					//新开关取消不能自动恢复，人为恢复；
					if (event.target.checked) {
						event.target.checked = false;
					} else {
						event.target.checked = true;
					}
					this.refreshFun(1000, item, type);
				});
			},

			//读写状态改值
			changeState2(item, type) {
				this.dialogFormVisible = true;
				this.sateForm.sensor_name = item.sensor_name;
				this.sateForm.id = item.id;
				this.sateForm.equip_id = item.equip_id;
				this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
				this.sateForm.type = type;
			},
			//读写报警改值
			changeState3(item, type) {
				this.dialogFormVisible_2 = true;
				this.sateForm.sensor_name = item.sensor_name;
				this.sateForm.id = item.id;
				this.sateForm.equip_id = item.equip_id;
				this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
				this.sateForm.type = type;
			},
			//读写多位开关改值
			changeState4(item, type) {
				if (item.read_write == 2) {
					event.preventDefault();
					this.dialogFormVisible_4 = true;
					this.sateForm.type = type;
					this.sateForm.sensor_name = item.sensor_name;
					this.sateForm.id = item.id;
					this.sateForm.equip_id = item.equip_id;
					this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
					this.sateForm.value = item.value;
					this.sateForm.ext_vars = item.ext_vars;
					//this.keyLen=Object.keys(item.ext_vars).length;
					this.threeSW = item.ext_vars[this.sateForm.value];
				} else {
					this.$message({
						type: 'info',
						duration: 2000,
						message: '只读类型，不可操作!'
					});
				}
			},

			letOneToZero() {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": this.sateForm.id,
						"value": 1

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.setStateVal(0);
					}
				}).catch(error => {
					console.log(error)
				});

			},

			letZeroToOne() {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": this.sateForm.id,
						"value": 0

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.setStateVal(1);
					}
				}).catch(error => {
					console.log(error)
				});

			},

			setStateVal(val) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": this.sateForm.id,
						"value": val

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (this.dialogFormVisible) {
							this.$message({
								message: '恭喜,修改状态成功!',
								type: 'success',
								center: true
							});
							this.dialogFormVisible = false;
						} else if (this.dialogFormVisible_2) {
							this.$message({
								message: '恭喜,清除报警成功!',
								type: 'success',
								center: true
							});
							this.dialogFormVisible_2 = false;
						} else if (this.dialogFormVisible_3) {
							this.$message({
								message: '恭喜,开关操作成功!',
								type: 'success',
								center: true
							});
							this.dialogFormVisible_3 = false;
						} else if (this.dialogFormVisible_4) {
							this.$message({
								message: '恭喜,多位开关操作成功!',
								type: 'success',
								center: true
							});
							this.dialogFormVisible_4 = false;
						}
					} else {
						this.refreshFun(1000, this.sateForm, this.sateForm.type);
					}
					this.dialogFormVisible_4 = false;
					this.dialogFormVisible_3 = false;
					this.dialogFormVisible_2 = false;
					this.dialogFormVisible = false;
				}).catch(error => {
					console.log(error)
				});

			},

			changeBox(event) {
				var that = this;
				if (event.target.id) {
					this.box = event.target.id;
					switch (this.box) {
						case 'live':
							this.roundLineLive(this.chartItem, this.chartItem.equip_type);
							break;
						case 'historyData':
							this.roundLineHis(this.chartItem);
							break;
					}
				}
			},

			changeMenu(key, e) {
				e.stopPropagation();
				var that = this;
				if (key) {
					console.log(key);
					//let nowId = event.target.id?event.target.id:event.target.parentElement.id;
					this.menuActive = key;
					this.topTab = key;
					// if(key!='map'){
					// 	this.map.destroy();
					// 	this.$refs.content.style.height=0;
					// 	this.$refs.content.style.overflow="hidden";

					// }
					this.chooseTab(this.topTab);
				}
			},

			roundLineHis(item) {
				var that = this;
				//this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
				this.loading_1 = true;
				var hisXdata = [];
				var hisYdata = [];
				this.$http({
					method: 'post',
					url: 'api/sensor/graph',
					data: {
						"id": item.id,
						"date_range": that.form.value.join('~')

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data !== []) {
							for (var i = 0; i < res.data.data.length; i++) {

								var tim = res.data.data[i].time.substr(5, 5) + "\n" + res.data.data[i].time.substr(
									11);
								var val = res.data.data[i].value;
								//因为值有可能0,所以这样判断
								if (tim && val !== null && val !== undefined && val !== '') {
									hisXdata.push(tim); //如果用unshift,将无法显示,且unshift()性能比push慢100倍;
									hisYdata.push(val);

								}
							}
							that.ch_option.xAxis.data = hisXdata.reverse();
							that.ch_option.series[0].data = hisYdata.reverse();
							that.ch_option.series[0].name = item.sensor_name;
							var chart = window.document.getElementById('myChart');
							//var myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
							var myChart = echarts.init(chart);
							myChart.setOption(that.ch_option);
							window.addEventListener("resize", () => {
								myChart.resize();
							})
							that.loading_1 = false;
						} else {
							that.lineout = 'history';
						}
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {

					console.log(error)
				});
			},

			changeChart() {
				this.roundLineHis(this.chartItem);
			},
			roundLineLive(item, equipType) {
				var that = this;
				this.innerVisible = true;
				this.box = "live";
				this.lineout = "";
				this.loading_2 = true;
				this.chartItem = Object.assign({
					'equip_type': equipType
				}, item);
				this.live_option.series[0].data = [];
				this.live_option.series[0].label.formatter = "{c}" + item.unit;
				this.live_option.xAxis.data = [];
				this.sensorSave = item.save_type;
				//this.livetimes = []; //进来之前先清空上次的数据
				//this.livedata = []; //不然会数据混连
				if (equipType == 1) {
					this.refreshOneSlaveData(item.equip_id, item.slave_id, 1);
				} else {
					this.refreshOneDeviceData(item.equip_id, 1);
				}
				this.nowSensor = item.sensor_name;
				this.which = item.save_type == 2 ? "实时曲线" : "曲线图";
				this.poid = item.id;
				this.live_option.series[0].name = item.sensor_name;
			},

			closeLine() {
				this.innerVisible = false;
				this.poid = 0;
				this.box = "";

			},
			//拍照
			showPhoto(id,name){
				this.photoForm.photoList=[];
				this.photoForm.id=id;
				if(!this.photoForm.equip_name){
				    this.photoForm.equip_name=name;
				}
				this.$http({
					method: 'post',
					async: false,
					url: 'api/camera_picture/lists',
					data: {
						"equip_id":id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						//console.log(res.data.data);
						if(res.data.data.length){
							for(let i=0,len=res.data.data.length;i<len;i++){
								let photo={
									id:res.data.data[i].id,
									path:res.data.data[i].file_path,
									name:res.data.data[i].file_name,
									time:res.data.data[i].upload_time
								};
								this.photoForm.photoList.push(photo);
							}
							//console.log(this.photoForm.photoList);
						}
					}
					// console.log(this.cameras);
				}).catch(error => {
					console.log(error);
				});
				this.dialogPhotoVisible=true;
			},

			takeAndUpload(id){
				this.photoLoading=true;
				this.$http({
					method: 'post',
					async: false,
					url: 'api/camera_picture/upload',
					data: {
						"equip_id":id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '拍照成功，已上传！',
							type: 'success',
							offset: 150,
							duration: 2000,
							center: true
						})
						this.showPhoto(id);
						this.photoLoading = false;
					}else{
						this.photoLoading = false;
					}
					// console.log(this.cameras);
				}).catch(error => {
					console.log(error);
					this.photoLoading = false;
				});
			},

			letBig(path) {
				this.bigPhotoVisible=true;
				this.photoForm.bigPath=path;
			},

			// downloadIamge(imgsrc,name) { // 下载图片地址和图片名

			//     // var a = document.createElement('a'); // 生成一个a元素
			//     // a.download = name || 'photo'; // 设置图片名称
			//     // a.href = imgsrc; // 将生成的URL设置为a.href属性
			//     // a.click(); // 触发a的单击事件
			// 	// console.log(filename);
			// 	// const a = document.createElement('a');
			// 	// 	a.setAttribute('src', url);
			// 	// 	//a标签的download属性	 filename:规定被下载的超链接目标。
			// 	// 	a.setAttribute('download', filename);
			// 	// 	document.body.appendChild(a);
			// 	// 	a.click();
			// 	//     document.body.removeChild(a);

			//     var image = new Image();
			//     // 解决跨域 Canvas 污染问题
			//     image.setAttribute('crossOrigin','anonymous');
			//     image.onload = function() {
			// 	    var canvas = document.createElement('canvas');
			// 	    canvas.width = image.width;
			// 	    canvas.height = image.height;
			// 	    var context = canvas.getContext('2d');
			// 	    context.drawImage(image, 0, 0, image.width, image.height);
			// 	    var url = canvas.toDataURL('image/jpeg'); //得到图片的base64编码数据
			// 	    var a = document.createElement('a'); // 生成一个a元素
			// 	    var event = new MouseEvent('click'); // 创建一个单击事件
			// 	    a.download = name || 'photo'; // 设置图片名称
			// 	    a.href = url; // 将生成的URL设置为a.href属性
			//         a.dispatchEvent(event); // 触发a的单击事件
			//     }
			//     image.src = imgsrc;
			// },

			// downloadIamge(url,name){
			// 	let blobUrl="";
			// 	this.$http.get(url).then(res => {
			// 	    return res.blob()
			// 	  }).then(blob => {
			// 	    blobUrl=URL.createObjectURL(blob)
			// 	})
			// 	const a = document.createElement('a');
			// 	a.setAttribute('src', blobUrl);
			// 	//a标签的download属性	 filename:规定被下载的超链接目标。
			// 	a.setAttribute('download', name);
			// 	document.body.appendChild(a);
			// 	a.click();
			// 	document.body.removeChild(a);
			// },

			// downloadIamge(imgsrc,name){
			// 	let x = new XMLHttpRequest();
			// 	x.open('GET', imgsrc, true)
			// 	x.responseType = 'blob'
			// 	x.onload = function () {
			// 		let url = window.URL.createObjectURL(x.response)
			// 		let a = document.createElement('a')
			// 		a.href = url
			// 		a.download = name;
			// 		a.click()
			// 	}
			// 	x.send()
			// },

			sureDeletePhoto(id,type="single") {
				this.$confirm(type=="single"?'删除后无法恢复，确认删除此照片吗?':'删除后无法恢复，确认删除这些照片吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deletePhoto(id);
				}).catch(() => {
					this.photoForm.photoIds=[];
					this.showPhoto(this.photoForm.id);
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
			},


			deletePhoto(id){
				this.$http({
					method: 'post',
					async: false,
					url: 'api/camera_picture/delete',
					data: {
						"id":id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '删除照片成功！',
							type: 'success',
							offset: 150,
							duration: 2000,
							center: true
						})
						this.showPhoto(this.photoForm.id);
					}
					// console.log(this.cameras);
				}).catch(error => {
					console.log(error);
				});
			},

			deleteManyPhoto(){
				if(!this.photoForm.photoIds.length){
					this.$message({
						message: '你尚未选择图片，请点击图片选择!',
						type: 'info',
						offset: 150,
						duration: 2000,
						center: true
					})
					return;
				}else{
					this.sureDeletePhoto(this.photoForm.photoIds.join(','),'many');
				}
			},

			deleteArrayItem(arr,item){
				if(!arr.length){return;}
				let num = arr.indexOf(item);
				arr.splice(num,1);
				return arr;
			},


			deleteSelect(event,item){
				if(!item.select){
					event.target.style.border="1px solid red";
					event.target.style.opacity=0.5;
					this.photoForm.photoIds.push(item.id);
					console.log(this.photoForm.photoIds);
					item.select=true;
				}else{
					event.target.style.border="none";
					event.target.style.opacity=1;
		            this.photoForm.photoIds=this.deleteArrayItem(this.photoForm.photoIds,item.id);
					console.log(this.photoForm.photoIds);
					item.select=false;
				}

			},

			async deleteAllPhoto(){
				var that=this;
				this.photoForm.photoIds=[];
				await this.photoForm.photoList.forEach(function(item,index,arr){
					that.photoForm.photoIds.push(item.id);
				});
				this.sureDeletePhoto(this.photoForm.photoIds.join(','),'many');
			},

			closePhotoDialog(){
				this.photoForm.photoIds=[];
				this.dialogPhotoVisible = false;
				this.photoForm.equip_name="";
			},

			//视频监控相关函数
			changeCamera(cam, ind) {
				var addr = "";
				for (let i = 0; i < this.cameras.length; i++) {
					if (this.cameras[i].value == cam) {
						addr = this.cameras[i].addr;
					}
				};
				switch (ind) {
					case 1:
						this.$refs.videoBox1.innerHTML =
							"<video id='play1' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
							" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player1 = new EZUIKit.EZUIPlayer("play1");
						break;
					case 2:
						this.$refs.videoBox2.innerHTML =
							"<video id='play2' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
							" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player2 = new EZUIKit.EZUIPlayer("play2");
						break;
					case 3:
						this.$refs.videoBox3.innerHTML =
							"<video id='play3' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
							" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player3 = new EZUIKit.EZUIPlayer("play3");
						break;
					case 4:
						this.$refs.videoBox4.innerHTML =
							"<video id='play4' autoplay  playsInline webkit-playsinline controls='controls' src=" + addr +
							" style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player4 = new EZUIKit.EZUIPlayer("play4");
						break;
				}

			},

			getCameraAll(id) {
				var that = this;
				this.cameras = [];
				this.$http({
					method: 'post',
					async: false,
					url: 'api/camera/all',
					data: {
						"product_id": id,
						"equip_id": ''
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						//this.camerasVideo=Array.from(res.data.data);
						this.Vcount = res.data.data.length;
						//rtmp与hls格式的区别
						//1.rtmp延时低（几秒），界面相对友好，但需要安装Adobe flash player
						//2.hls延时长（20至30秒），界面欠友好（但不影响），支持画中画（视频悬浮于右下角,可拖动位置，切换页面后可继续观看），无需安装Adobe flash player
						//3.flv格式延时与界面和hls一样，其他未测试；
						//另：免费个人账号下hls受并发限制后，rtmp还没有,可能是延时；企业账号未测试
						//已于2022年4月21日启用flv格式（与rtmp等价，但是不用安装Adobe flash player，低延时（只有3-5秒）
						//字段没变，rtmp_addr实际是flv格式；
						if (this.Vcount) {
							for (let i = 0; i < res.data.data.length; i++) {
								let camera = {
									value: res.data.data[i].id,
									label: res.data.data[i].camera_name,
									equip_name: res.data.data[i].equip_name ? res.data.data[i].equip_name :
										'全部',
									addr: res.data.data[i].rtmp_addr
								}
								this.cameras.push(camera);
							}
						}
						this.showVideo = true;
					}
					// console.log(this.cameras);
				}).catch(error => {
					console.log(error);
				});

			},

			showCamera() {
				var that = this;
				if (this.Vcount >= 4) {
					this.camera1 = this.cameras[0].value;
					this.camera2 = this.cameras[1].value;
					this.camera3 = this.cameras[2].value;
					this.camera4 = this.cameras[3].value;
					this.$refs.videoBox1.innerHTML =
						"<video id='play1'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[0]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.$refs.videoBox2.innerHTML =
						"<video id='play2'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[1]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.$refs.videoBox3.innerHTML =
						"<video id='play3'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[2]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					this.$refs.videoBox4.innerHTML =
						"<video id='play4'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[3]
						.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
					//如是rtmp格式，在source中加type='rtmp/flv'
					//setTimeout(function() {
					this.player1 = new EZUIKit.EZUIPlayer("play1");
					this.player2 = new EZUIKit.EZUIPlayer("play2");
					this.player3 = new EZUIKit.EZUIPlayer("play3");
					this.player4 = new EZUIKit.EZUIPlayer("play4");
					//}, 1000)
				} else if (this.Vcount < 4) {
					if (this.cameras[0] && this.cameras[0].addr) {
						this.$refs.videoBox1.innerHTML =
							"<video id='play1'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[0]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player1 = new EZUIKit.EZUIPlayer("play1");
					} else {
						this.player1 = null;
						this.$refs.videoBox1.innerHTML =
							"<div class='imgbig'  style='color:#aaa;font-size:0.4rem;line-height:400px;'>暂无监控视频</div>";
					}
					if (this.cameras[1] && this.cameras[1].addr) {
						this.$refs.videoBox2.innerHTML =
							"<video id='play2'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[1]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player2 = new EZUIKit.EZUIPlayer("play2");
					}
					if (this.cameras[2] && this.cameras[2].addr) {
						this.$refs.videoBox3.innerHTML =
							"<video id='play3'  playsInline webkit-playsinline controls='controls' src=" + this.cameras[2]
							.addr + " style='height:100%;width:100%;font-size:16px;object-fit:fill;'></video>";
						this.player3 = new EZUIKit.EZUIPlayer("play3");
					}
				} else if (this.Vcount == 0) {

				}
			},

			//历史数据相关函数
			async getAllGroups(id) {
				var groups = [{
					value: 0,
					label: "全部"
				}];
				return await this.$http({
					method: 'post',
					async: false,
					url: 'api/sensor_group/all',
					data: {
						"equip_id": id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (let i = 0; i < res.data.data.length; i++) {
							let group = {
								value: res.data.data[i].id,
								label: res.data.data[i].sgroup_name
							}
							groups.push(group)
						}
						return groups
					} else {
						return false;
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {
					console.log(error);
					return false;

				});
			},

			// async getSlave(id) {
			// 	console.log('a');
			// 	await this.getAllSlaves(id).then(res=>{
			// 	   this.slaves=Array.from(res);
			// 	});
			// 	if (this.slaves[1]) {
			// 		this.form.slave = this.slaves[0].value;

			// 		this.slaveName = this.slaves[0].label;
			// 	} else {
			// 		this.form.slave = "暂无子设备";
			// 	}
			// },


			async getHistoryGroups(id) {
				await this.getAllGroups(id).then(res => {
					this.historyGroups = Array.from(res);
				});
				this.historyForm.sgroup_id = this.historyGroups[0].value;
			},

			// async getSensorsAll(id){
			// 	this.historySensors=[];
			// 	return await this.$http({
			// 		method: 'post',
			// 		url: 'api/sensor/all',
			// 		data:this.historyForm.deviceType == 1 && this.historyForm.slavesCount > 1 && this.historyForm.slave_id? {
			// 			"equip_id":this.historyForm.device,
			// 			"slave_id":id,
			// 			"action":'export'
			// 		} : {
			// 			"equip_id":this.historyForm.device,
			// 			"action":'export'
			// 		}
			// 	}).then(res => {
			// 		if (res && res.data.result == "success") {
			// 			for (let i = 0; i < res.data.data.length; i++) {
			// 				let sensor = {
			// 					value: res.data.data[i].id,
			// 					label: res.data.data[i].sensor_name
			// 				}
			// 				this.historySensors.push(sensor);
			// 			}
			// 		}else{
			// 			return false;
			// 		}
			// 		// console.log(that.pointdata[0].icon)
			// 	}).catch(error => {
			// 		console.log(error);
			// 		return false;

			// 	});
			// },

			changeHistoryDevice(device) {
				this.varSensors = [];
				this.queryParams.pageNo = 1;
				this.historyForm.sensorIds = [];
				if (this.historyType == 'chart' && this.myChart) {
					this.myChart.dispose();
				}
				for (let i = 0, len = this.devices.length; i < len; i++) {
					if (this.devices[i].value == device) {
						this.historyForm.deviceType = this.devices[i].type;
						this.historyForm.groupsCount = this.devices[i].groupsCount;
						if (this.historyForm.deviceType == 1) {
							this.getHistoryGroups(device);
						}
						break;
					}
				}
				this.getHistory(1, this.queryParams.pageSize, device, 0, 0, this.historyForm.value.join('~'));
			},

			changeHistoryGroup(group) {
				this.varSensors = [];
				this.queryParams.pageNo = 1;
				this.historyForm.sensorIds = [];
				if (this.historyType == 'chart' && this.myChart) {
					this.myChart.dispose();
				}
				this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, group, 0, this.historyForm.value
					.join('~'));
			},

			//callback接收回调参数，展开为true，收起为false；
			//changeHistorySensor(callback,sensor){
			//if(callback){return };}
			changeHistorySensor(sensor) {
				//if(callback){return };
				//this.source.cancel('取消');
				this.queryParams.pageNo = 1;
				var that = this;
				if (this.historyType == 'chart') {
					//this.loadingHistory=true;
					//这是取消连续点击时造成的重复请求，
					//只有点击的速度快过响应速度时才会起作用；
					// this.cancelRequest();
					//清除上一次点击选择未执行完成的延时；
					if (this.historyTimeout) {
						clearTimeout(that.historyTimeout);
					}
					if (this.myChart) {
						this.myChart.dispose();
					}
					//延时用于等待客户继续选择，避免重复请求；
					//当参数长度和实际长度相等时，说明客户已选择完毕，可以开始请求
					this.historyTimeout = setTimeout(function() {
						if (sensor.length == that.historyForm.sensorIds.length) {
							if (that.historyForm.sensorIds.length <= 10) {
								that.getHistoryChart(that.historyForm.device, that.historyForm.sgroup_id, that
									.historyForm.sensorIds.join(','), that.historyForm.value.join('~'));
							} else {
								that.showMessage();
								let ten = that.historyForm.sensorIds.slice(0, 10);
								that.getHistoryChart(that.historyForm.device, that.historyForm.sgroup_id, ten.join(
									','), that.historyForm.value.join('~'));
							}

						}
					}, 2000)
				} else {
					this.getHistory(1, that.queryParams.pageSize, that.historyForm.device, that.historyForm.sgroup_id,
						sensor.join(','), that.historyForm.value.join('~'));
				}
			},

			changeHistoryTime(val) {
				this.queryParams.pageNo = 1;
				if (this.historyType == 'chart' && this.myChart) {
					this.myChart.dispose();
				}
				this.getHistory(1, this.queryParams.pageSize, this.historyForm.device, this.historyForm.sgroup_id, this
					.historyForm.sensorIds.join(','), val.join('~'));
			},

			showHistoryTable(num = 1, size = 10, id, groupid = '', sensors, val) {
				this.historyType = "table";
				this.getHistory(1, size, id, groupid, sensors, val);
			},


			getHistory(num = 1, size = 20, id, groupid, sensors, val) {
				this.historyData = [];
				this.fields = [];
				this.$http({
					method: 'post',
					url: 'api/equip/history',
					data: this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1 && this.historyForm
						.sgroup_id ? {
							"limit": size,
							"page": num,
							'id': id,
							"sgroup_id": groupid,
							"sensor_id": sensors,
							"date_range": val
						} : {
							"limit": size,
							"page": num,
							"id": id,
							"sensor_id": sensors,
							"date_range": val

						}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (var key in res.data.data.field) {
							var field = {
								value: key,
								label: res.data.data.field[key]
							}
							this.fields.push(field);
						}
						if (!sensors) {
							this.varSensors = Array.from(this.fields);
						}
						if (this.historyType == 'table') {
							this.historyData = res.data.data.values;
							this.queryParams.total = res.data.count;
							for (let i = 0, len = res.data.data.values.length; i < len; i++) {
								this.historyData[i].num = res.data.data.values[i].num + 1 + (this.queryParams
									.pageNo - 1) * this.queryParams.pageSize;
								this.historyData[i].time = res.data.data.values[i].time.substr(5, 14);
							}
						} else {
							this.getHistoryChart(id, groupid, sensors, val);
						}
					}
				}).catch(error => {
					console.log(error);
				});
			},

			// <a :href="'https://api.ykiot.net/api/equip/download?id='+historyForm.device
			// 	+'&sgroup_id='+historyForm.sgroup_id+'&sensor_id='+historyForm.sensorIds.join(',')+'&date_range='+historyForm.value.join('~')+'&token='+win.localStorage.getItem('attoken')"
			// 	style="vertical-align:middle;color:white;margin-left:-0.25rem;" target="_blank"
			// 	class="newAll">导出</a>
			sendOutHistory(){
				var that=this;
			    window.location.href=that.baseurl + 'api/equip/download?id=' + that.historyForm.device
				+'&sgroup_id='+that.historyForm.sgroup_id+'&sensor_id='+that.historyForm.sensorIds.join(',')+'&date_range='+that.historyForm.value.join('~')+'&token='+win.localStorage.getItem('attoken');
			},

			showMessage() {
				this.$message({
					message: '最多只支持同时绘制10条曲线,超出将只绘制前10条!',
					type: 'info',
					offset: 100,
					duration: 4000,
					center: true
				});
			},

			cancelRequest() {
				let cancelArr = window.axiosCancel;
				cancelArr.forEach((ele, index) => {
					ele.cancel('请求被取消了');
					delete window.axiosCancel[index];
				})
			},


			//导出历史数据函数，与使用a标签效果一样，需要将数据流转换为文件，
			//在这里显得多此一举，暂不使用，因为使用a标签导出的直接就是表格
			// sendOutHistory(id,sgroupid='',sensors,val){
			// 	this.$http({
			// 		method: 'get',
			// 		url: 'api/equip/download',
			// 		params:{
			// 			"id":id,
			// 			"sgroup_id": sgroupid,
			// 			"sensor_id": sensors,
			// 			"date_range":val
			// 		},
			// 		responseType: 'blob'
			// 	}).then(res => {
			// 		if (res && res.status == 200) {
			// 			//console.log(res.data);//这里是数据流
			// 			this.downloadFile(res.data,"历史报表");
			// 			console.log("导出成功");
			// 		}
			// 	}).catch(error => {
			// 		console.log(error);
			// 	});
			// },

			// downloadFile (data, name) {
			// 	if (!data) {
			// 		 this.$message.error('下载失败，解析数据为空！')
			// 		 return
			// 	}
			// 	// 创建一个新的url，此url指向新建的Blob对象
			// 	let url = window.URL.createObjectURL(new Blob([data]));
			// 	// 创建a标签，并隐藏a标签
			// 	let link = document.createElement('a');
			// 	link.style.display = 'none';
			// 	// a标签的href属性指定下载链接
			// 	link.href = url;
			// 	//setAttribute() 方法添加指定的属性，并为其赋指定的值
			// 	// 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
			// 	link.setAttribute('download', name + '.xsls');
			// 	document.body.appendChild(link)
			// 	link.click();
			// 	document.body.removeChild(link); //下载完成移除元素
			// },

			getHistoryChart(id, groupid = '', sensors, val) {
				var that = this;
				let ten = sensors;
				this.historyType = 'chart';
				if (!sensors && this.varSensors.length > 10) {
					this.$message({
						message: '你尚未选择变量，默认显示前10条曲线！',
						type: 'info',
						offset: 100,
						duration: 4000,
						center: true
					});
					let sensor = [];
					for (let i = 0; i < 10; i++) {
						sensor.push(that.varSensors[i].value);
					}
					ten = sensor.join(',');
				} else if (!sensors && this.varSensors.length <= 10) {
					if (!this.varSensors.length) { //没有设置存储的变量点
						return;
					}
					this.$message({
						message: '你尚未选择变量，默认显示全部曲线！',
						type: 'info',
						offset: 100,
						duration: 4000,
						center: true
					});
					let sensor = [];
					for (let i = 0; i < this.varSensors.length; i++) {
						sensor.push(that.varSensors[i].value);
					}
					ten = sensor.join(',');
				} else if (sensors && sensors.split(',').length > 10 && this.varSensors.length > 10) {
					this.showMessage();
					let sensor = sensors.split(',');
					ten = sensor.slice(0, 10).join(',');
				}
				this.lines = [];
				this.loadingHistory = true;
				this.history_chart.xAxis.data = [];
				this.history_chart.series = [];
				this.history_chart.legend.data = [];
				this.$http({
					method: 'post',
					url: 'api/equip/graph',
					//cancelToken: this.source.token,
					data: this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1 && this.historyForm
						.sgroup_id ? {
							'id': id,
							"sgroup_id": groupid,
							"sensor_id": ten,
							"date_range": val
						} : {
							"id": id,
							"sensor_id": ten,
							"date_range": val

						}

				}).then(res => {
					if (res && res.data.result == "success") {
						for (let key in res.data.data.field) {
							let line = {
								id: key,
								label: res.data.data.field[key]
							}
							this.lines.push(line);
						}
						for (let i = 0, len = res.data.data.values.length; i < len; i++) {
							this.history_chart.xAxis.data.push(res.data.data.values[i].time.substr(5, 5) + "\n" +
								res.data.data.values[i].time.substr(11));
						}

						if (this.lines.length > 5) {
							for (let n = 0, len2 = this.lines.length; n < len2; n++) {
								this.history_chart.legend.data.push(that.lines[n].label);
								this.history_chart.series.push({
									name: that.lines[n].label,
									type: 'line',
									data: [],
									itemStyle: {
										normal: {
											color: that.lineColor[n]
										}
									},
									smooth: true
								});
							}
						} else {
							for (let n = 0, len2 = this.lines.length; n < len2; n++) {
								this.history_chart.legend.data.push(that.lines[n].label);
								this.history_chart.series.push({
									name: that.lines[n].label,
									type: 'line',
									data: [],
									markPoint: {
										data: [{
											type: 'max',
											name: '最大值'
										}, {
											type: 'min',
											name: '最小值'
										}]
									},
									markLine: {
										data: [{
											type: 'average',
											name: '平均值'
										}]
									},
									itemStyle: {
										normal: {
											color: that.lineColor[n]
										}
									},
									smooth: true
								});
							}
						}
						for (let n = 0, len3 = this.lines.length; n < len3; n++) {
							for (let i = 0, len4 = res.data.data.values.length; i < len4; i++) {
								this.history_chart.series[n].data.push(res.data.data.values[i].data[that.lines[n]
									.id])
							}
							//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
							//而且unshift方法比push方法慢100倍,reverse性能最高;
							this.history_chart.series[n].data.reverse();
						}
						setTimeout(function() {
							//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
							//而且unshift方法比push方法慢100倍,reverse性能最高;
							that.history_chart.xAxis.data.reverse();
							var chart = that.$refs.historyChart;
							//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
							that.myChart = echarts.init(chart);
							that.myChart.setOption(that.history_chart);
							window.addEventListener("resize", () => {
								that.myChart.resize();
							})
							that.loadingHistory = false;

						}, 1000)
					}
				}).catch(error => {
					console.log(error);
				});
			},

			goWidth() {
				var that = this;
				this.isShow = !this.isShow;
				if (this.topTab == 'history' && this.historyType == 'chart') {
					this.historyType = 'wait';
					setTimeout(function() {
						that.historyType = 'chart';
					}, 1000)
					setTimeout(function() {
						var chart = that.$refs.historyChart;
						that.myChart = echarts.init(chart);
						that.myChart.setOption(that.history_chart);
						window.addEventListener("resize", () => {
							that.myChart.resize();
						})
					}, 2000)
				}else if(this.topTab=='analysis'){
					let type=this.analysisType;
					if(this.analysisType=='chart' || this.analysisType=='bar'){
						this.analysisType ='wait';
						setTimeout(function(){
							that.analysisType =type;
						},1000)
						setTimeout(function(){
							if(type=='chart'){
								var chart = that.$refs.analysisChart;
								that.myChart = echarts.init(chart);
								that.myChart.setOption(that.analysis_chart);
								window.addEventListener("resize", () => {
									that.myChart.resize();
								})
							}else if(type=='bar'){
								var chart = that.$refs.analysisBar;
								that.myChart = echarts.init(chart);
								that.myChart.setOption(that.dataset_option);
								window.addEventListener("resize", () => {
									that.myChart.resize();
								})
							}
						},2000)

					}
				}

			},

			//报警记录相关函数
			getAlarm(num = 1, size = 20, equip, time) {
				var that = this;
				if (!equip || !equip.length) {
					equip = [];
				}
				this.alarmData = [];
				this.$http({
					method: 'post',
					url: 'api/alarm/lists',
					data: {
						"product_id": this.optionId,
						"equip_id": equip.join(','),
						"alarm_time": time,
						"limit": size,
						"page": num

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.alarmData = Array.from(res.data.data);
						this.queryParams_2.total = res.data.count;
					}
				}).catch(error => {

					console.log(error);
				});
			},

			getAllAlarm() {
				this.alarmForm.device = [];
				this.queryParams_2.pageNo = 1;
				this.getAlarm(this.queryParams_2.pageNo, this.queryParams_2.pageSize, [], this.alarmForm.value.join('~'));
			},

			//操作记录相关函数
			getLogs(num = 1, size = 20, equip, val) {
				var that = this;
				if (!equip || !equip.length) {
					equip = [0];
				}
				this.operData = [];
				this.$http({
					method: 'post',
					url: 'api/equip/logs',
					data: {
						"limit": size,
						"page": num,
						"product_id": this.optionId,
						"id": equip.join(','),
						"log_time": val

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.operData = Array.from(res.data.data);
						this.queryParams_3.total = res.data.count;
						for (let i = 0, len = res.data.data.length; i < len; i++) {
							this.operData[i].log_time = res.data.data[i].log_time.substr(5, 14);
						}
					}
				}).catch(error => {

					console.log(error)
				});
			},

			getAllLogs() {
				this.operForm.device = [];
				this.queryParams_3.pageNo = 1;
				this.getLogs(this.queryParams_3.pageNo, this.queryParams_3.pageSize, [0], this.operForm.value.join('~'));
			},
			//数据报表相关函数
			getAnalysisTable(optionId) {
				//console.log(this.analysisForm.value);
				this.tableData = [];
				this.tableFields = [];
				this.tableTables = [];
				this.tableForm.title = '';
				this.$http({
					method: 'post',
					url: 'api/statement/all',
					data: {
						"product_id": optionId

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							for (let i = 0, len = res.data.data.length; i < len; i++) {
								let table = {
									value: res.data.data[i].id,
									label: res.data.data[i].title
								}
								this.tableTables.push(table);
							}
							this.tableForm.title = this.tableTables[0].value;
							this.getAnalysisData(this.tableForm.title, this.tableForm.value,this.tableForm.type);
						}
					}
				}).catch(error => {
					console.log(error);
				});
			},

			changeAnalysisType(type){
				if (type == 1) {
					this.tableForm.value = this.getNowFormatDate()
				} else if (type == 3) {
					this.tableForm.value = this.getNowFormatDate().substr(0, 7)
				} else if (type == 4) {
					this.tableForm.value = this.getNowFormatDate().substr(0, 4)
				}
				this.getAnalysisData(this.tableForm.title, this.tableForm.value,type);

			},

			getAnalysisData(id, time,type) {
				this.tableData = [];
				this.tableFields = [];
				this.$http({
					method: 'post',
					url: 'api/statement/data',
					data: {
						"id": id,
						"date": time,
						"type":type
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if(res.data.data){
						   console.log(res.data.data);
						   this.tableFields = Array.from(res.data.data.fields);
						   this.tableData = Array.from(res.data.data.values);
						   console.log(this.tableFields)
						}else{
						 	this.tableFields = [];
						 	this.tableData = [];
						}

					}
				}).catch(error => {
					console.log(error);
				});
			},

			//导出数据报表函数
			sendOutTable(){
				var that=this;
				window.location.href = that.$baseurl + 'api/statement/download?id=' + that.tableForm.title
						+ '&date=' + that.tableForm.value + '&type=' + that.tableForm.type+'&token=' + localStorage.getItem('attoken');
			},


      //数据分析相关函数
			async getAnalysisGroups(id) {
				await this.getAllGroups(id).then(res => {
					this.analysisGroups = Array.from(res);
					this.analysisGroups.shift();
				});
				this.analysisForm.sgroup_id = this.analysisGroups[0].value;
				//this.getAnalysisSensorsAll(this.analysisForm.sgroup_id);

			},

			changeAnalysisDevice(device) {
				var that = this;
				if(this.myChart){
					this.myChart.dispose();
				}
				this.analysisData = [];
				this.analysisFields = [];
				this.analysisVarSensors = [];
				this.analysisForm.sensorIds = [];
				for (let i = 0, len = this.devices.length; i < len; i++) {
					if (this.devices[i].value == device) {
						this.analysisForm.deviceType = this.devices[i].type;
						this.analysisForm.dailyStartTime= this.numToTime(this.devices[i].dailyStartTime);
						if(Number(this.devices[i].dailyStartTime)<=this.getNowHour()){
						    this.analysisForm.value = [this.getBeforeAfterDate(1,'before')+" "+this.analysisForm.dailyStartTime,this.getNowTime()];
						}else{
							 this.analysisForm.value = [this.getBeforeAfterDate(2,'before')+" "+this.analysisForm.dailyStartTime,this.getNowTime()];
						}
						//this.analysisForm.value = [that.getNowFormatDate()+" "+this.analysisForm.dailyStartTime, this.getNowTime()];
						this.analysisForm.groupsCount = this.devices[i].groupsCount;
						if (this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1) {
							this.getAnalysisGroups(device);
							setTimeout(function() {
								that.getAnalysisSensorsAll(that.analysisForm.sgroup_id);
							}, 1000);
						} else {
							this.getAnalysisSensorsAll(0);
						}
						break;
					}
				}
			},

			changeAnalysisGroup(group) {
				if(this.myChart){
					this.myChart.dispose();
				}
				this.analysisData = [];
				this.analysisFields = [];
				this.analysisVarSensors = [];
				this.analysisForm.sensorIds = [];
				this.getAnalysisSensorsAll(group);
				//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			},

			//callback接收回调参数，展开为true，收起为false；
			//changeHistorySensor(callback,sensor){
			//if(callback){return };}
			changeAnalysisSensor(sensor) {
				var that = this;
				if (this.analysisTimeout) {
					clearTimeout(that.analysisTimeout);
				}
				//下面的做法是防止频繁请求，只在最后一个请求；
				this.analysisTimeout = setTimeout(function() {
					if (sensor.length == that.analysisForm.sensorIds.length) {
						if(that.analysisType!='bar'){
							that.getAnalysis(that.analysisForm.device, sensor.join(','), that.analysisForm.methodsValue
								.join(','), that.analysisForm.period, that.analysisForm.value.join('~'), that
								.analysisForm.start_time, that.analysisType, that.nowMethod);

						}else{
							that.analysisForm.nowSensors=[];
							that.nowAnalysisSensor = sensor[0];
							for (let i = 0, len = that.analysisVarSensors.length; i < len; i++) {
								for(let n=0,len2=sensor.length;n<len2;n++){
									if(that.analysisVarSensors[i].value==sensor[n]){
										that.analysisForm.nowSensors.push(that.analysisVarSensors[i])
									}
								}

							}

							that.getAnalysis(that.analysisForm.device,that.analysisForm.nowSensors[0].value, that.analysisForm.methodsValue
								.join(','), that.analysisForm.period, that.analysisForm.value.join('~'), that
								.analysisForm.start_time, that.analysisType,'');


						}
					}
				}, 2000);

			},

			sortOrder(item1, item2) {
				if (item1.order < item2.order) {
					return -1;
				} else if (item1.order > item2.order) {
					return 1;
				} else {
					return 0
				}
			},

			changeAnalysisMethod(methods) {
				//console.log(methods);
				var that = this;
				this.analysisForm.methods = [];
				for (let i = 0, len = methods.length; i < len; i++) {
					for (let n = 0, len2 = this.analysisMethods.length; n < len2; n++) {
						if (methods[i] == this.analysisMethods[n].value) {
							this.analysisForm.methods.push(this.analysisMethods[n]);
						}
					}
				}
				this.nowMethod = this.analysisForm.methods[0].value;
				if (this.analysisForm.methods.length >= 2) {
					let newMethods = Array.from(this.analysisForm.methods);
					this.analysisForm.methods = newMethods.sort(that.sortOrder);
				}
				if(this.analysisType!='bar'){
					this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), methods.join(','), this
						.analysisForm.period, this.analysisForm.value.join('~'), this.analysisForm.start_time, this
						.analysisType, this.nowMethod);

				}else{
					this.getAnalysis(this.analysisForm.device,this.nowAnalysisSensor, methods.join(','), this
						.analysisForm.period, this.analysisForm.value.join('~'), this.analysisForm.start_time,'bar', '');
				}
			},

			changeAnalysisPeriod(period) {
				if (period == '1m') {
					this.analysisForm.value = this.getThreeMonth();
				} else {
					this.analysisForm.value = [this.getNowFormatDate(), this.getNowFormatDate()];
				}
				if(this.analysisType!='bar'){
					this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
						.methodsValue.join(','), period, this.analysisForm.value.join('~'), this.analysisForm.start_time,
						this.analysisType, this.nowMethod);
				}else{
					this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
						.methodsValue.join(','), period, this.analysisForm.value.join('~'), this.analysisForm.start_time,
						this.analysisType, this.nowMethod);
				}
			},

			changeAnalysisTime(val) {
				if(this.analysisType!='bar'){
					this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
						.methodsValue.join(','), this.analysisForm.period, val.join('~'), this.analysisForm.start_time,
						this.analysisType, this.nowMethod);

				}else{
					this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
						.methodsValue.join(','), this.analysisForm.period, val.join('~'), this.analysisForm.start_time,
						this.analysisType, this.nowMethod);
				}
			},

			changeAnalysisStartTime(val) {
				if(this.analysisType!='bar'){
					this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','), this.analysisForm
						.methodsValue.join(','), this.analysisForm.period, this.analysisForm.value.join('~'), val, this
						.analysisType, this.nowMethod);
				}else{
					this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor, this.analysisForm
						.methodsValue.join(','), this.analysisForm.period, this.analysisForm.value.join('~'), val, this
						.analysisType, this.nowMethod);
				}
			},

			async getAnalysisSensorsAll(id) {
				this.analysisForm.sensorIds = [];
				this.analysisVarSensors = [];
				this.analysisForm.nowSensors = [];
				return await this.$http({
					method: 'post',
					url: 'api/sensor/all',
					data: this.analysisForm.deviceType == 1 && this.analysisForm.groupsCount > 1 && this
						.analysisForm.sgroup_id ? {
							"equip_id": this.analysisForm.device,
							"sgroup_id": id,
							"action": 'export'
						} : {
							"equip_id": this.analysisForm.device,
							"action": 'export'
						}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (let i = 0; i < res.data.data.length; i++) {
							let sensor = {
								value: res.data.data[i].id,
								label: res.data.data[i].sensor_name
							}
							this.analysisVarSensors.push(sensor);
						}
						if (this.analysisVarSensors.length) {
							//默认前5个变量，不够5个就是全部；
							if (this.analysisVarSensors.length <= 5) {
								for (let i = 0, len = this.analysisVarSensors.length; i < len; i++) {
									this.analysisForm.sensorIds.push(this.analysisVarSensors[i].value);
								    this.analysisForm.nowSensors.push(this.analysisVarSensors[i]);
								}
							} else {
								for (let i = 0; i < 5; i++) {
									this.analysisForm.sensorIds.push(this.analysisVarSensors[i].value);
								    this.analysisForm.nowSensors.push(this.analysisVarSensors[i]);
								}
							}
                            if(this.analysisType!="bar"){
								this.getAnalysis(this.analysisForm.device, this.analysisForm.sensorIds.join(','),
									this.analysisForm.methodsValue.join(','), this.analysisForm.period, this
									.analysisForm.value.join('~'), this.analysisForm.start_time, this
									.analysisType, this.nowMethod);
							}else{
								this.nowAnalysisSensor = this.analysisForm.nowSensors[0].value;
								this.getAnalysis(this.analysisForm.device, this.nowAnalysisSensor,
									this.analysisForm.methodsValue.join(','), this.analysisForm.period, this
									.analysisForm.value.join('~'), this.analysisForm.start_time, this
									.analysisType,'');
							}
							//下面是默认第一个变量；
							//this.analysisForm.sensorIds=[this.analysisVarSensors[0].value];
							//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
						}
					} else {
						return false;
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {
					console.log(error);
					return false;

				});
			},

			//获取数据分析，暂时不考虑分页
			getAnalysis(id, sensors, methods, period, val, start = "", type = "table", method = "max") {
				var that = this;
				if (!sensors) {
					return;
				}
				if(this.myChart){
					this.myChart.dispose();
				}
				this.analysisType = type;
				this.analysisFields = [];
				if (type == 'table') {
					this.analysisData = [];
				} else if(type=='chart') {
					this.loadingAnalysis = true;
					this.analysis_chart.xAxis.data = [];
					this.analysis_chart.series = [];
					this.analysis_chart.legend.data = [];
				}else if(type == 'bar'){
					this.loadingAnalysis = true;
					this.dataset_option.dataset.source=[];
					this.dataset_option.series=[];
				}
				this.$http({
					method: 'post',
					url: 'api/equip/analysis',
					data: {
						"id": id,
						"sensor_id": sensors,
						"functions": methods,
						"group": period,
						"date_range": val,
						"start_time": start

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						//console.log(res.data.data);
						for (let i = 0, len = res.data.data.field.length; i < len; i++) {
							this.analysisFields.push(res.data.data.field[i]);
						}
						if (type == 'table') {
							this.analysisData = res.data.data.values;
							for (let i = 0, len = res.data.data.values.length; i < len; i++) {
								if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
									.data
									.data.values[i].time) {
									this.analysisData[i].time = res.data.data.values[i].time.substr(5, 11);
								} else {
									this.analysisData[i].time = res.data.data.values[i].time;
								}
							}
						} else if(type=='chart'){
							for (let i = 0, len = res.data.data.values.length; i < len; i++) {
								if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
									.data
									.data.values[i].time) {
									this.analysis_chart.xAxis.data.push(res.data.data.values[i].time.substr(5,
									11));
								} else {

									this.analysis_chart.xAxis.data.push(res.data.data.values[i].time);
								}
							}
							for (let n = 0, len2 = this.analysisFields.length; n < len2; n++) {
								this.analysis_chart.legend.data.push(that.analysisFields[n]);
								this.analysis_chart.series.push({
									name: that.analysisFields[n],
									type: 'line',
									data: [],
									itemStyle: {
										normal: {
											color: that.lineColor[n]
										}
									},
									smooth: true
								});
							}
							for (let n = 0, len3 = this.analysisFields.length; n < len3; n++) {
								for (let i = 0, len4 = res.data.data.values.length; i < len4; i++) {
									this.analysis_chart.series[n].data.push(res.data.data.values[i][method + '_' +
										n
									])
								}
								//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
								//而且unshift方法比push方法慢100倍,reverse性能最高;
								//数据分析不用反向
								//this.analysis_chart.series[n].data.reverse();
							}
							setTimeout(function() {
								//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
								//而且unshift方法比push方法慢100倍,reverse性能最高;
								//数据分析不用反向
								//that.analysis_chart.xAxis.data.reverse();
								var chart = that.$refs.analysisChart;
								//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
								that.myChart = echarts.init(chart);
								that.myChart.setOption(that.analysis_chart);
								window.addEventListener("resize", () => {
									that.myChart.resize();
								})
								that.loadingAnalysis = false;

							}, 1000)
						}else if(type=='bar'){
							this.nowAnalysisSensor = sensors;
							let methodArr=['method'];
							for(let i=0,len=this.analysisForm.methods.length;i<len;i++){
							    methodArr.push(this.analysisForm.methods[i].label);
								this.dataset_option.series.push({type:'bar',itemStyle:{color:that.lineColor[i]}});
							}
							this.dataset_option.dataset.source.push(methodArr);
							for (let i = 0, len = res.data.data.values.length; i < len; i++) {
								if (this.analysisForm.period != '1d' && this.analysisForm.period != '1m' && res
									.data
									.data.values[i].time) {
									this.dataset_option.dataset.source[i+1]=[res.data.data.values[i].time.substr(5,
									11)];
								} else {
							        this.dataset_option.dataset.source[i+1]=[res.data.data.values[i].time];
								}
							    for(let n=0,len2=this.analysisForm.methods.length;n<len2;n++){
									this.dataset_option.dataset.source[i+1].push(res.data.data.values[i][this.analysisForm.methods[n].value+"_0"])

								}
							}
							//console.log(this.dataset_option);
							setTimeout(function() {
								//经测试，不使用单个unshift(),而使用整体reverse(),是因为后者效率高,更快;
								//而且unshift方法比push方法慢100倍,reverse性能最高;
								//数据分析不用反向
								//that.analysis_chart.xAxis.data.reverse();
								var chart = that.$refs.analysisBar;
								//that.myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
								that.myChart = echarts.init(chart);
								that.myChart.setOption(that.dataset_option);
								window.addEventListener("resize", () => {
									that.myChart.resize();
								})
								that.loadingAnalysis = false;

							}, 1000)

						}
					}
				}).catch(error => {
					console.log(error);
				});
			},

			// getAnalysisChart(id, sensors, methods, period, val, start = ""){

			// },


			//数据分析表位合计函数，参数{columns,data}
			getSummary(param) {
				let {
					columns,
					data
				} = param;
				let sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					if (index === 1) { //时间不累加
						sums[index] = '/';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = sums[index].toFixed(2);
						sums[index] += ''; //单位
					} else {
						sums[index] = '/'; //非数值
					}
				});

				return sums;
			},


			//示功图
			// changePowerDevice(device){
			// 	var that=this;
			// 	//this.analysisData = [];
			// 	//this.analysisFields = [];
			// 	this.powerVarSensors=[];
			// 	this.powerForm.sensorIds=[];
			// 	for(let i=0,len=this.devices.length;i<len;i++){
			// 		if(this.devices[i].value==device){
			// 		    this.powerForm.deviceType=this.devices[i].type;
			// 			this.powerForm.slavesCount = this.devices[i].slavesCount;
			// 		    if(this.powerForm.deviceType==1 && this.powerForm.slavesCount>1){
			// 			    this.getPowerSlaves(device);
			// 				setTimeout(function(){
			// 					that.getPowerSensorsAll(that.powerForm.slave_id);
			// 				},1000);
			// 			}else{
			// 				this.getPowerSensorsAll(0);
			// 			}
			// 			break;
			// 		}
			// 	}
			// },

			// changePowerSlave(slave){
			// 	//this.analysisData = [];
			// 	//this.analysisFields = [];
			// 	this.powerVarSensors=[];
			// 	this.powerForm.sensorIds=[];
			// 	this.getPowerSensorsAll(slave);
			// 	//this.getAnalysis(this.analysisForm.device,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			// },

			// //callback接收回调参数，展开为true，收起为false；
			// //changeHistorySensor(callback,sensor){
			// 	//if(callback){return };}
			// changePowerSensor(sensor){
			// 	var that=this;
			// 	if(this.powerTimeout){
			// 		clearTimeout(that.powerTimeout);
			// 	}
			// 	//下面的做法是防止频繁请求，只在最后一个请求；
			// 	this.powerTimeout=setTimeout(function(){
			// 		if(sensor.length==that.powerForm.sensorIds.length){
			// 		    that.getPower(that.powerForm.device,sensor.join(','));
			// 		}
			// 	},2000);

			// },

			getPower() {
				var that = this;
				this.powerLoading = false;
				var powerChart = this.$refs.powerChartLive;
				this.myPowerChartLive = echarts.init(powerChart);
				//this.dataX=[0,1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1,0];
				//this.dataY=[1,3,4,5,5,5,5,5,5,5,5,4,2,1,1,1,1,1,1,1,1];
				var i = 0;
				this.dataY = [
					[0, 1],
					[1, 3],
					[2, 4],
					[3, 5],
					[4, 5],
					[5, 5],
					[6, 5],
					[7, 5],
					[8, 5],
					[9, 5],
					[10, 5],
					[9, 4],
					[8, 2],
					[7, 1],
					[6, 1],
					[4, 1],
					[3, 1],
					[2, 1],
					[1, 1],
					[0, 1]
				];
				//var data=[[0,2],[1,4],[2,5],[3,6],[4,6],[5,6],[6,6],[7,6],[8,6],[9,6],[10,6],[9,5],[8,3],[7,2],[6,2],[4,2],[3,2],[2,2],[1,2],[0,2]];
				this.powerTimer = setInterval(function() {
					that.power_option.series[0].data.push(that.dataY[i]);
					//that.power_option.series[1].data.push(data[i]);
					i++;
					that.myPowerChartLive.setOption(that.power_option);
					if (i == that.dataY.length) {
						clearInterval(that.powerTimer);
						that.deletePowerChart();
						that.getPower();
					}
				}, 1000)
				window.addEventListener("resize", () => {
					that.myPowerChartLive.resize();
				})
			},

			deletePowerChart() {
				//var that=this;
				this.power_option.series[0].data = [];
				//this.power_option.series[1].data = [];
				//this.power_option.xAxis.data = [];
				//this.dataX = [];
				//this.dataY = [];
				//this.myPowerChartLive.setOption(that.power_option);
			},

			// quickRead(){
			//    var that=this;
			//    this.$http({
			//    	method: 'post',
			//    	url: 'equip/quickRead',
			//    	data: {
			//    		"id":that.id,

			//    	}
			//    }).then(res => {
			//    	if (res && res.data.result == "success") {
			//    		if(){
			//    		   this.$message({
			//    			  message: '快速读取成功！',
			//    			  type: 'success',
			//    			  center:true
			//    			});

			//    		}
			//    	}
			//    	// console.log(that.pointdata[0].icon)
			//    }).catch(error => {
			//    	console.log(error);

			//    });
			// },

			//上下线相关函数
			getLines(num, size, equip, val) {
				var that = this;
				if (!equip || !equip.length) {
					equip = [0];
				}
				this.lineData = [];
				this.$http({
					method: 'post',
					url: 'api/equip/conLogs',
					data: {
						"limit": size,
						"page": num,
						"product_id": this.optionId,
						"id": equip.join(','),
						"log_time": val

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.lineData = res.data.data;
						this.queryParams_4.total = res.data.count;
					}
				}).catch(error => {

					console.log(error)
				});
			},

			getAllLines() {
				this.lineForm.device = [];
				this.getLines(this.queryParams_4.pageNo, this.queryParams_4.pageSize, [0], this.lineForm.value.join('~'));
			},

		  //设备地图相关函数
      fullScreen() {
      	var that = this;
      	this.mapFullscreen = !this.mapFullscreen;
      	if (this.mapFullscreen) {
      		that.$refs.content.removeAttribute("id", "content");
      		that.$refs.content.style.position = "fixed";
      		that.$refs.content.style.top = 0;
      		that.$refs.content.style.left = 0;
      		that.$refs.content.style.right = 0;
      		that.$refs.content.style.bottom = 0;
      		that.$refs.content.style.zIndex = 100;
      		that.$refs.mapbtn.style.bottom = "0.5rem";
          setTimeout(function(){
            that.$refs.content.style.width = window.screen.width + "px";
            that.$refs.content.style.height = window.screen.height + "px";
          },500);
      		that.$refs.search.style.position = "fixed";
      	} else {
      		that.$refs.content.setAttribute("id", "content");
      		that.$refs.content.style.position = "relative";
      		that.$refs.content.style.top = 0;
      		that.$refs.content.style.left = 0;
      		that.$refs.content.style.zIndex = 1;
      		that.$refs.content.style.width = "99.8%";
      		that.$refs.mapbtn.style.bottom = "0.6rem";
      		that.$refs.search.style.position = "absolute";
      		setTimeout(function() {
      			that.$refs.content.style.height="calc(100vh - 1.45rem)"
      		}, 1000)
      	}
      },

			getEquipMap(id = 0, isOn = '', isAlarm = '', isfirst = true) {
				var that = this;
				this.equipdata = [];
				this.markers = [];
				this.$http({
					method: 'post',
					url: 'api/equip/all',
					data: {
						"product_id": id,
						"is_on": isOn,
						"is_alarm": isAlarm
					}
				}).then(res => {
					//console.log(res.data.data);
					if (res && res.data.result == "success") {
						this.equipdata = res.data.data;
						for (let i = 0, len = this.equipdata.length; i < len; i++) {
							this.$set(this.equipdata[i], 'stateIcon', '');
							if (this.equipdata[i].is_on == 0) {
								this.equipdata[i].stateIcon =
									"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
							} else if (this.equipdata[i].is_on == 1) {
								if (this.equipdata[i].is_alarm == 1) {
									this.equipdata[i].stateIcon =
										"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
								} else {
									this.equipdata[i].stateIcon =
										"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
								}
							}
							if (i == len - 1) {
								break;
							}
						}
						if (isfirst) {
							this.showMap();
						} else {
							this.addManyMarker();
							setTimeout(function() {
								that.map.setFitView();
							}, 1000)
						}
						//this.mapLoading = false;
					} else {
						this.showMap();
					}

				}).catch(error => {

					console.log(error);
				});
			},

			changeMapShow(type) {
				this.map.clearMap();
				if (type == 1) {
					this.mapForm.state = 0;
					this.getEquipMap(this.optionId, '', '', false);
				} else {
					this.getGraspEquip(this.optionId);
				}
			},

			changeGraspEquipOrRange() {
				this.map.clearMap();
				this.getGraspArray(this.mapForm.equip_id);
			},

			//获取所有开启轨迹的设备
			getGraspEquip(id) {
				this.mapForm.equip_id = "";
				this.graspEquips = [];
				this.$http({
					method: 'post',
					url: 'api/equip/all',
					data: {
						"product_id": id,
						"gps_path": 1
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							for (let i = 0, len = res.data.data.length; i < len; i++) {
								let device = {
									value: res.data.data[i].id,
									label: res.data.data[i].equip_name
								}
								this.graspEquips.push(device);
							}
							this.mapForm.equip_id = this.graspEquips[0].value;
							this.getGraspArray(this.graspEquips[0].value);
						} else { //这是判断只有组态没有设备的情况
							this.mapForm.equip_id = "";
							this.$message({
								message: "当前项目暂时没有开启轨迹的设备!",
								type: "info",
								offset: 300,
								center: true
							});
							return false;
						}
					}
				}).catch(error => {
					console.log(error);
					return false;
				});
			},

			//坐标轨迹点拆分与绘制
			// splitGraspArray(arr,max=499){
			// 	if(arr.length<=max){
			// 		this.showGrasp(arr,1,1);
			// 	}else{
			// 		//余数
			// 		let remainder=arr.length%max;
			// 		//console.log(remainder);
			// 		//次数，如果不是刚好整数次就向上取整
			// 		let times=remainder==0?arr.length/max:Math.ceil(arr.length/max);
			// 		//console.log(times);
			// 		for(let t=1;t<=times;t++){
			// 			let newArr=[];
			// 			let start=t==1?0:(t-1)*max-1;
			// 			let end=t<times?max*t-1:arr.length-1;
			// 			//因为上一次的重点是下一次的起点所以使用<=才能无缝连接
			// 			for(let i=start;i<=end;i++){
			// 				newArr.push(arr[i]);
			// 			}
			// 			this.showGrasp(newArr,t,times);
			// 		}
			// 	}
			// },

			//优化的坐标轨迹点拆分与绘制
			splitGraspArray(arr, max = 500) {
				if (arr.length <= max) {
					this.showGrasp(arr, 1, 1);
				} else {
					//由于轨迹无缝衔接每次的终点是下次的起点，所以实际只新画了max-1个点
					//虽然第一次和最后一次不是这样但不影响结果
					//实际新画数
					let newPoints = max - 1;
					//余数
					let remainder = arr.length % newPoints;
					//console.log(remainder);
					//次数，如果不是刚好整数次就向上取整
					let times = remainder == 0 ? arr.length / newPoints : Math.ceil(arr.length / newPoints);
					//console.log(times);
					for (let t = 1; t <= times; t++) {
						let newArr = [];
						//上次的终点是下次的起点所以是t-1；
						let start = (t - 1) * newPoints;
						let end = t < times ? t * newPoints : arr.length - 1;
						//因为上一次的重点是下一次的起点所以使用<=才能无缝连接
						for (let i = start; i <= end; i++) {
							newArr.push(arr[i]);
						}
						this.showGrasp(newArr, t, times);
					}
				}
			},


			//获取轨迹系列坐标
			getGraspArray(id) {
				var that = this;
				if (!id) {
					return false;
				}
				this.$http({
					method: 'post',
					url: 'api/equip/getGpsPath',
					data: {
						"id": id,
						"time_range": this.mapForm.time_range.join('~')
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							// 后台已经做了坐标为空过滤，这里不再过滤
							this.splitGraspArray(res.data.data, 500);
							setTimeout(function() {
								that.showStartEndMarker();
							}, 1000)
						} else {
							this.$message({
								message: "当前暂时没有此设备的轨迹,你可以尝试增大时间范围!",
								type: "info",
								offset: 300,
								center: true
							});
						}
					}
				}).catch(error => {
					console.log(error);
					return false;
				});
			},
			//显示轨迹函数,t表示当前是第几次拆分,times表示总次数
			showGrasp(pathParam, t, times) {
				var that = this;
				//轨迹和轨迹纠偏测试
				var graspRoad;
				//总路程
				this.distance = 0;
				//sp速度(km/h)，ag角度，这两个可以为0，但不能没有
				//ag是与正北方向的顺时针夹角，[ 0, 360 ]
				//tm以秒为单位，第一个采集点的tm值从1970年0点开始，其他采集点为与第一个采集点时间的差值
				//从第二个点开始，tm应该是递增的；
				//用纠偏，sp,ag,tm三者必须有，不用纠偏三者都可以没有
				//以下是纠偏前的路径
				// var path1 = [];
				// for(var i=0;i<pathParam.length;i+=1){
				//     path1.push([pathParam[i].x,pathParam[i].y])
				// }
				// var oldLine = new AMap.Polyline({
				//     path:path1,
				//     strokeWeight:8,
				//     strokeOpacity:1,
				//     strokeColor:'red'
				// })
				// this.map.add(oldLine);
				// that.map.setFitView();
				//以下是纠偏后的路径
				if (!graspRoad) {
					graspRoad = new AMap.GraspRoad()
				}
				graspRoad.driving(pathParam, function(error, result) {
					if (!error) {
						var path2 = [];
						var newPath = result.data.points;
						//获取纠偏后的第一点(起点坐标)
						if (t == 1) {
							that.startPoint = [newPath[0].x, newPath[0].y];
						}
						//获取纠偏后的最后点(终点坐标)
						if (t == times) {
							that.endPoint = [newPath[newPath.length - 1].x, newPath[newPath.length - 1].y];
						}
						//官方文档说distance(总距离，单位m)与data平级是错误的，实际上distance属于data的属性，与points平级
						//console.log(result.data.distance);
						that.distance = result.data.distance;
						//console.log(distance);
						for (var i = 0; i < newPath.length; i += 1) {
							path2.push([newPath[i].x, newPath[i].y]);
						}
						var newLine = new AMap.Polyline({
							path: path2,
							strokeWeight: 8,
							strokeOpacity: 0.8,
							strokeColor: '#0091ea',
							//是否延路径显示白色方向箭头
							showDir: true
						})
						that.map.add(newLine);
						that.map.setFitView();
					}
				})
			},

			//标记起点和终点还有路程
			showStartEndMarker() {
				var that = this;
				var startMarker = new AMap.Marker({
					map: that.map,
					icon: new AMap.Icon({
						size: [32, 32],
						imageSize: [32, 32],
						image: '../../static/local.png'
					}),
					//content:"<div style='width:40px;height:24px;line-height:24px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.5)'>起点<div>",
					position: that.startPoint,
					offset: new AMap.Pixel(-16, -32),
					//offset: new AMap.Pixel(7,-31),
					label: {
						content: '起点',
						offset: new AMap.Pixel(-8, -20),
						direction: "right"
					},
					// title:'起点',
					// offset: new AMap.Pixel(8,-8)
				});

				this.map.add(startMarker);
				var str = '终点　总路程:' + this.distance + '米';
				var endMarker = new AMap.Marker({
					map: that.map,
					icon: new AMap.Icon({
						size: [32, 32],
						imageSize: [32, 32],
						image: '../../static/local.png'
					}),
					position: that.endPoint,
					//这里的宽度只能识别具体宽度，不能识别auto，还有min-width和max-width;
					//content:"<div style='width:200px;height:24px;line-height:24px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.5)'>"+str+"<div>",
					offset: new AMap.Pixel(-16, -32),
					label: {
						content: str,
						offset: new AMap.Pixel(-8, -20),
						direction: "right"
					}
					// title:'起点',
					// offset: new AMap.Pixel(8,-8)
				});
				this.map.add(endMarker);
			},

			changeMapDeviceState(state) {
				this.map.clearMap();
				switch (state) {
					case 0: //全部
						this.getEquipMap(this.optionId, '', '', false);
						break;
					case 1: //在线正常
						this.getEquipMap(this.optionId, 1, 0, false);
						break;
					case 2: //在线报警
						this.getEquipMap(this.optionId, 1, 1, false);
						break;
					case 3: //离线
						this.getEquipMap(this.optionId, 0, '', false);
						break;
					default:
						this.getEquipMap(this.optionId, '', '', false);
						break;

				}
			},

			//center表示是否使当前点居中显示；
			getInfoAndAddress(id, center = true) {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/equip/info',
					data: {
						"id": id
					}
				}).then(res => {
					if (res && res.data.result == "success") {

						//console.log(res.data.data);
						var data = res.data.data;
						var zIndex = res.data.data.geo_coord;
						// var hei = data.liquid_level <= data.equip_conf.height ? data.liquid_level * (1 / data.equip_conf.height) * 100 :
						// 	100;
						var tong =
							`<div id="waterBox" style="width:400px;height:auto;position:relative;background-color:rgba(0,0,0,0.8)">
							<div
							style="width:100%;
							position:relative;
							color:white;
							text-align:left;
							height:auto;
							padding:0;
							line-height:26px;">
							<div
								style="font-size:16px;width:100%;
								overflow:hidden;
								white-space: nowrap;
			                    text-overflow: ellipsis;">
								    <span>设备名称：</span><span style="display:inline-block;" id="device" title="">` +
							data.equip_name +
							`<span>
								</div>
								<div
								style="font-size:16px;width:100%;"><span>设备编码：</span><span style="display:inline-block;" id="code" title="">` +
							data.equip_code +
							`</span></div>
							<div style="font-size:16px;width:100%;max-height:53px;line-height:26px;white-space: wrap;">设备地址：` +
							data.geo_name + `</div>
								<div style="font-size:16px;width:100%;"><span>添加时间：</span><span style="display:inline-block;" id="project">` +
							data.add_time + `</span></div>
							<div>
						</div>`;
						that.infoWindow = new AMap.InfoWindow({
							offset: new AMap.Pixel(0, -24),
							content: tong
						});
						that.infoWindow.open(that.map, zIndex);
						if (center) {
							that.map.setCenter(zIndex);
							that.map.setZoom(20);
						}
					}
				}).catch(error => {
					console.log(error)
				});

			},


			addMarker(point, data) {
				var that = this;
				var status = "";
				if (data.is_on) {
					status = data.is_alarm ? '报警' : '正常';
				} else {
					status = '离线';
				}
				var marker = new AMap.Marker({
					map: that.map,
					icon: new AMap.Icon({
						size: [26, 32],
						imageSize: [26, 32],
						image: data.stateIcon
					}),
					position: point,
					offset: new AMap.Pixel(-13, -32),
					label: {
						//content: data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
						//content: data.equip_name + '(' + status + ')',
						content: data.equip_name,
						offset: new AMap.Pixel(-4, -20),
						direction: "right"
					}
					//title:data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
					//offset: new AMap.Pixel(-13,-32)
				});
				marker.on("click", function() {
					that.getInfoAndAddress(data.id, false);
				});
				//setTimeout(function() {
				this.markers.push(marker);
				this.map.add(marker);
				//marker.setMap(that.map);
				//}, 500);
				//清除点击事件弹出对话框之后，地图会跟随鼠标移动的问题；
				// marker.on("mousemove", function() {
				//     event.stopPropagation();
				//     event.preventDefault();
				//     event.stopImmediatePropagation();

				// });
				//     marker.on("click", function() {
				//         that.outerVisible = true;
				//         clearInterval(that.timer);
				//         if (that.Socket) {
				//             that.Socket.close();
				//         }
				//         setTimeout(function() {
				//             if (that.pointdata.length <= 6) {
				//                 that.$refs.databox.style.height = "5rem";
				//             } else {
				//                 that.$refs.databox.style.height = "7.5rem";
				//             }
				//         }, 1000);
				//         that.eqid = data.id;
				//         that.deviceType = data.type;
				//         that.slavesCount = data.slaves_count;
				//         if (data.type == 1 && data.slaves_count > 1) {
				//             that.getSlave(data.id);
				//         } else {
				//             that.getView(data.id);
				//         }
				//         that.isOn = data.is_on;
				//         const wsUrl = "ws://api.ykiot.net:53010/";
				//         that.Socket = new WebSocket(wsUrl);
				//         if (that.Socket.readyState !== WebSocket.OPEN) {
				//             that.Socket.onopen = function() {
				//                 setTimeout(function() {
				//                     var pingData = {
				//                         action: "ping",
				//                         data: that.deviceType == 1 && that.slavesCount > 1 ? {
				//                             user_id: localStorage.getItem("userId"),
				//                             slave_id: that.slaveId,
				//                             token: localStorage.getItem("attoken")

				//                         } : {
				//                             user_id: localStorage.getItem("userId"),
				//                             equip_id: that.eqid,
				//                             token: localStorage.getItem("attoken")

				//                         }
				//                     };
				//                     that.Socket.send(JSON.stringify(pingData));
				//                     if (data.type == 1 && data.slaves_count > 1) {
				//                         that.refreshData(that.slaveId);
				//                     } else {
				//                         that.refreshData(that.eqid);
				//                     }
				//                     //that.Socket.onmessage = that.onMessage;
				//                     that.timer = setInterval(function() {
				//                         that.Socket.send(JSON.stringify(pingData));
				//                     }, 30000);
				//                 }, 600);

				//                 console.log("连接成功");
				//             };
				//         }
				//         that.Socket.onerror = that.onError;
				//         that.Socket.onmessage = that.onMessage;
				//         //that.Socket.onclose=that.onClose;
				//         that.equip = data.equip_name;
				//     });
			},

			addManyMarker() {
				var that = this;
				this.lostDevice = [];
				//this.points = [];
				if (this.equipdata.length) {
					for (var i = 0; i < this.equipdata.length; i++) {
						if (this.equipdata[i]) {
							if (
								this.equipdata[i].geo_coord &&
								Number(that.equipdata[i].geo_coord[0]) > 70 &&
								Number(that.equipdata[i].geo_coord[0]) < 140 &&
								Number(that.equipdata[i].geo_coord[1]) > 1 &&
								Number(that.equipdata[i].geo_coord[1]) < 60
							) {
								var point = [
									that.equipdata[i].geo_coord[0],
									that.equipdata[i].geo_coord[1]
								];
								//that.points.push(point);
								that.addMarker(point, that.equipdata[i]);
							} else {
								if (that.equipdata[i].type != 3) {
									that.lostDevice.push(that.equipdata[i].equip_name);
								}
							}
						}
					}
					if (that.lostDevice[0]) {
						//如果不延时，将于上面的数据点报警产生重叠
						setTimeout(function() {
							that.$notify({
								title: "设备定位报警提示:",
								dangerouslyUseHTMLString: true,
								message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">以下设备(共' +
									that.lostDevice.length +
									'台)，坐标异常，未在地图上标注，请查看位置!</br><span style="color:red;">' +
									that.lostDevice.join("</br>") +
									"</span></div>",
								duration: 0,
								offset: 180
							});
						}, 500);
					}
				} else {
					that.$message({
						message: "暂时没有可以标注的设备!",
						type: "warn",
						offset: 300,
						center: true
					});
					that.map.setZoomAndCenter(5, "西安");
				}
			},
			showMap() {
				var that = this;

				// setTimeout(function() {
				that.map = new AMap.Map("content", {
					resizeEnable: true,
					expandZoomRange: true,
					enableHighAccuracy: true
					//下面为图层设置
					//layers: [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()]
				});
				//设置地图主题颜色
				//可选的值有：normal(默认),dark,light,whitesmoke,fresh,grey,graffiti,macaron,blue,darkblue,wine；
				//var styleName = "amap://styles/darkblue";
				//that.map.setMapStyle(styleName);
				//设置主题结束

				// that.map.hotspotover=function(){
				//    event.stopPropagation();
				//    event.preventDefault();
				//    event.stopImmediatePropagation();
				// }
				AMap.plugin(["AMap.Scale", "AMap.MapType", "AMap.GraspRoad"], function() {
					// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
					//that.map.addControl(new AMap.ToolBar());

					// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
					that.map.addControl(new AMap.Scale());
					//轨迹纠偏插件
					that.map.addControl(new AMap.GraspRoad());
					// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
					//map.addControl(new AMap.OverView({isOpen:true}));

					// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
					that.map.addControl(new AMap.MapType());

					// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
					// map.addControl(new AMap.Geolocation());
				});

				//that.showmap = true;
				//that.hiddeTip();
				that.addManyMarker();
				setTimeout(function() {
					that.map.setFitView();
				}, 1000);
				// if (window.screen.height == 1200 && window.screen.width == 1920) {
				// 	that.$refs.content.removeAttribute("id", "content");
				// } else {
				// 	that.$refs.content.style.height = 13.5 + "rem";
				// }

				// window.document.getElementById("mapbtn").style.display = "inline-block";
				//}, 1000);

			},

			// 		showImage(id){
			// 			this.$http({
			// 			method: 'post',
			// 			url: 'api/product/info',
			// 			data: {
			// 				"id": id

			// 				}
			// 			}).then(res => {
			//                      this.productInfo.product_image = this.baseurl + res.data.data.product_image;

			// 				}

			// 			}).catch(error => {
			// 				console.log(error);

			// 			});
			// 		},

			//以下是组态相关函数
			//图纸整体刷新
			refreshViewAndData() {
				var stageId = localStorage.getItem("stageId") ? localStorage.getItem("stageId") : this.viewForm.stage_id;
				document.getElementById("mainIframe").src = 'static/optionZT/client_view.html?stageId=' + stageId;
				//this.refreshView();
			},
			//只刷新组态数据的函数
			refreshViewData() {
				this.$http({
					method: 'post',
					url: 'api/draw/refresh',
					data: {
						'id': this.viewForm.stage_id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							type: 'info',
							message: '图纸数据已刷新'
						});
					}
				}).catch(error => {
					console.log(error);


				});
			},

			getViewAll(id) {
				var that = this;
				this.showView = true;
				this.viewList = [];
				this.viewForm.view_id = '';
				this.viewForm.stage_id = '';
				this.$http({
					method: 'post',
					async: true,
					url: 'api/view/all',
					data:  {
						"product_id": id,
						"visit_allow": "all,pc",
						"user_id": localStorage.getItem("at_userId")
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							for (var i = 0, len = res.data.data.length; i < len; i++) {
								var view = {
									value: res.data.data[i].id,
									label: res.data.data[i].view_name
								}
								this.viewList.push(view);
							}
							if (this.liveData) {
								this.viewForm.view_id = this.liveData.view_id || this.viewList[0].value;
							} else {
								this.viewForm.view_id = this.viewList[0].value;
								this.nowView = this.viewList[0].label;
							}
							this.getStageAll(this.viewForm.view_id);
						} else {
							this.viewForm.view_id = '';
							this.viewForm.stage_id = '';
							//document.getElementById("mainIframe").src="";
						}
					}
				}).catch(error => {
					console.log(error);

				});

			},


			//获取图纸函数
			getStageAll(id) {
				var that = this;
				this.drawList = [];
				this.$http({
					method: 'post',
					url: 'api/draw/all',
					data: {
						'view_id': id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							var draw = {
								value: res.data.data[i].id,
								label: res.data.data[i].draw_name
							}
							this.drawList.push(draw);
						}

						this.viewForm.stage_id = this.drawList[0].value;

						localStorage.setItem('stageId', that.viewForm.stage_id);
						//this.drawName=this.drawList[0].label;

						//this.refreshView();

					}
				}).catch(error => {
					console.log(error);
					this.drawList = [];

				});
			},

			//组态下拉框改变事件
			changeView(view) {
				this.getStageAll(view);
			},

			//图纸下拉框改变事件
			changeViewStage(stage) {
				localStorage.setItem('stageId', stage);
			},

			//全屏时，点击组态列表改变事件
			changeStage(item, event) {
				var that = this;
				if (event.target.innerText == item.label) {
					this.nowView = item.label;
				}
				this.viewForm.view_id = item.value;
				this.changeView(item.value);
				setTimeout(function() {
					that.$refs.mainIframe.removeAttribute("class", "fram");
					that.$refs.mainIframe.removeAttribute("class", "fram_2");
					that.$refs.mainIframe.style.position = "fixed";
					that.$refs.mainIframe.style.top = 0;
					that.$refs.mainIframe.style.left = 0;
					that.$refs.mainIframe.style.zIndex = 100;
					//that.$refs.mainIframe.setAttribute("frameborder","no");
					//that.$refs.mainIframe.setAttribute("border",'0');
					that.$refs.mainIframe.style.width = window.screen.width + 'px';
					that.$refs.mainIframe.style.height = window.screen.height + 'px';
					that.$refs.mainIframe.style.backgroundColor = "#fff";

				}, 500)
				setTimeout(function() {
					that.fullList = false;
				}, 5000)
			},

			// showFullList() {
			// 	var that = this;
			// 	this.fullList = !this.fullList;
			// 	clearTimeout(that.viewListTimer);

			// },

			// keepFullList() {
			// 	var that = this;
			// 	this.fullList = true;
			// 	clearTimeout(that.viewListTimer);
			// },

			// closeFullList() {
			// 	var that = this;
			// 	//this.fullList = false;
			// 	//clearTimeout(that.viewListTimer);
			// 	this.viewListTimer = setTimeout(function() {
			// 		that.fullList = false;
			// 	}, 3000);
			// },

			changeInterval(interval) {
				if (Number(interval) < 30) {
					this.viewForm.interval = 30;
				} else if (Number(interval) > 600) {
					this.viewForm.interval = 600;
				}
			},

			swiperStage() {
				this.dialogSwiperVisible = true;
			},

			showTrunView(interval = 60) {
				var that = this
				this.isPlay = true;
				this.$message({
					type: 'info',
					message: '组态图纸正在轮播...'
				});
				let time = Number(interval) || 60;
				this.swiperTimer = setInterval(function() {
					that.viewForm.stage_id = that.drawList[that.start].value;
					localStorage.setItem("stageId", that.viewForm.stage_id);
					that.start++;
					if (that.start == that.drawList.length) {
						that.start = 0;
					}
				}, time * 1000);
				this.dialogSwiperVisible = false;
			},

			stopTrunView() {
				var that = this;
				this.isPlay = false;
				this.$message({
					type: 'info',
					message: '组态图纸轮播已停止'
				});
				clearInterval(that.swiperTimer);
				this.viewForm.stage_id = this.drawList[0].value;
				localStorage.setItem("stageId", that.viewForm.stage_id);
			},

		  fullViewScreen() {
      	var that = this;
      	this.isFullViewscreen = !this.isFullViewscreen;
      	if (this.isFullViewscreen) {
      		//使用帧动画避免抖动
      		//requestAnimationFrame(function() {
      			that.$refs.mainIframe.removeAttribute("class", "fram");
      			that.$refs.mainIframe.style.position = "fixed";
      			that.$refs.mainIframe.style.top = 0;
      			that.$refs.mainIframe.style.left = 0;
      			that.$refs.mainIframe.style.zIndex = 100;
      			//that.$refs.mainIframe.setAttribute("frameborder", "no");
      			//that.$refs.mainIframe.setAttribute("border", '0');
      			that.$refs.mainIframe.style.width = window.screen.width + 'px';
      			that.$refs.mainIframe.style.height = window.screen.height + 'px';
      			that.$refs.mainIframe.style.backgroundColor = "#fff";
      		//});
      	} else {
      		//requestAnimationFrame(function() {
      			that.fullList = false;
      			console.log("full");
      			that.$refs.mainIframe.style.position = "relative";
      			that.$refs.mainIframe.style.top = 0;
      			that.$refs.mainIframe.style.left = 0;
      			that.$refs.mainIframe.style.zIndex = 1;
      			that.$refs.mainIframe.setAttribute("class","fram");
      			that.$refs.mainIframe.style.width = "100%";
      			setTimeout(function() {
      				that.$refs.mainIframe.style.height="calc(100vh - 2.5rem)";
      			}, 1000)
      			//that.$refs.mainIframe.setAttribute("frameborder", "no"); //1表示为三维边框，0不是三维，no表示不显示边框，yes显示默认边框
      			//that.$refs.mainIframe.setAttribute("border", "0");
      		//});

      	}
      },

			//以下是所有分页函数
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
					this.getHistory(this.queryParams.pageNo, val, this.historyForm.device, this.historyForm.sgroup_id, this
						.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
				} else {
					this.getHistory(this.queryParams.pageNo, val, this.historyForm.device, '', this.historyForm.sensorIds
						.join(','), this.historyForm.value.join('~'));
				}
			},

			current_change(currentPage) {
				this.queryParams.pageNo = currentPage;
				if (this.historyForm.deviceType == 1 && this.historyForm.groupsCount > 1) {
					this.getHistory(currentPage, this.queryParams.pageSize, this.historyForm.device, this.historyForm
						.sgroup_id, this.historyForm.sensorIds.join(','), this.historyForm.value.join('~'));
				} else {
					this.getHistory(currentPage, this.queryParams.pageSize, this.historyForm.device, '', this.historyForm
						.sensorIds.join(','), this.historyForm.value.join('~'));
				}

			},
			handleSizeChange_2(val) {
				this.queryParams_2.pageSize = val;
				this.getAlarm(this.queryParams_2.pageNo, val, this.alarmForm.device, this.alarmForm.value.join('~'));
			},
			current_change_2(currentPage) {
				this.queryParams_2.pageNo = currentPage;
				this.getAlarm(currentPage, this.queryParams_2.pageSize, this.alarmForm.device, this.alarmForm.value.join(
					'~'));

			},
			handleSizeChange_3(val) {
				this.queryParams_3.pageSize = val;
				this.getLogs(this.queryParams_3.pageNo, val, this.operForm.device, this.operForm.value.join('~'));
			},
			current_change_3(currentPage) {
				this.queryParams_3.pageNo = currentPage;
				this.getLogs(currentPage, this.queryParams_3.pageSize, this.operForm.device, this.operForm.value.join(
					'~'));
			},
			handleSizeChange_4(val) {
				this.queryParams_4.pageSize = val;
				this.getLines(this.queryParams_4.pageNo, val, this.lineForm.device, this.lineForm.value.join('~'));
			},
			current_change_4(currentPage) {
				this.queryParams_4.pageNo = currentPage;
				this.getLines(currentPage, this.queryParams_4.pageSize, this.lineForm.device, this.lineForm.value.join(
					'~'));

			}

			//数据分析暂时不做分页
			// handleSizeChange_5(val) {
			// 	this.queryParams_5.pageSize = val;
			// 	if(this.analysisForm.deviceType==1 && this.analysisForm.slavesCount>1){
			// 	    this.getAnalysis(this.queryParams_5.pageNo, val, this.analysisForm.device,this.analysisForm.slave_id,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			// 	}else{
			// 		this.getAnalysis(this.queryParams_5.pageNo, val, this.analysisForm.device,'',this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			// 	}
			// },

			// current_change_5(currentPage) {
			// 	this.queryParams_5.pageNo = currentPage;
			// 	if(this.analysisForm.deviceType==1 && this.analysisForm.slavesCount>1){
			// 		this.getAnalysis(currentPage, this.queryParams_5.pageSize, this.analysisForm.device,this.analysisForm.slave_id,this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			// 	}else{
			// 		this.getAnalysis(currentPage, this.queryParams_5.pageSize, this.analysisForm.device,'',this.analysisForm.sensorIds.join(','),this.analysisForm.methodsValue.join(','),this.analysisForm.period,this.analysisForm.value.join('~'));
			// 	}

			// }


		},

		beforeDestroy() {
			//window.speechSynthesis.cancel();
			this.$message.closeAll();
			this.$notify.closeAll();
			if (this.map) {
				this.map.destroy();
			}
		},

		destroyed() {
			var that = this;
			//下面两句是清除从地图跳过来的默认数据
			localStorage.removeItem("liveData");
			this.liveData = null;
			clearInterval(that.timer);
			clearInterval(that.swiperTimer);
			clearInterval(that.powerTimer);
			clearInterval(that.tokenTimer);
			clearInterval(that.platformAlarmTimer);
			if (this.Socket) {
				this.Socket.close();
				this.Socket.onerror = null;
			}
			if (this.alarmSocket) {
				this.alarmSocket.close();
				this.alarmSocket.onerror = null;
			}
			this.stopVideo();
			//clearInterval(that.nowTimer);
			//clearInterval(that.weaTimer);
		}

	}
</script>

<style scoped>
	@media all and (max-width:2560px) {
		.photoBox{
			max-height:13.2rem!important;

		}

		.bigPhotoBox{
			height:900px!important;
		}

		.bigPhotoBox>img{
			height:900px!important;
		}

	  .imgbig {
			height: 5.65rem !important;
		}

		.big>>>.el-input__inner {
			font-size: 18px !important;
		}

		.big>>>.el-range-input {
			font-size: 18px !important;
		}
	}

	@media all and (max-width:1920px) {
		.photoBox{
			max-height:8.7rem!important;

		}

		.bigPhotoBox{
			height:620px!important;
		}

		.bigPhotoBox>img{
			height:620px!important;
		}

	.imgbig {
			height: 5.95rem !important;
		}

		.big>>>.el-input__inner {
			font-size: 16px !important;
		}

		.big>>>.el-range-input {
			font-size: 16px !important;
		}

	}

	@media all and (max-width:1600px) {
		.big>>>.el-input__inner {
			font-size: 12px !important;
		}

		.big>>>.el-range-input {
			font-size: 12px !important;
		}

		.send>>>.el-input__inner {
			height: 0.6rem !important;
			line-height: 0.6rem !important;
			vertical-align: top !important;
			margin-top: -2px !important;
		}

		.send>>>.el-select__caret {
			height: 0.6rem !important;
			line-height: 0.6rem !important;
			vertical-align: top !important;
			/* margin-top:-2px!important; */
		}

		.newAll {
			height: 0.6rem !important;
			width: 2.2rem !important;
			line-height: 0.6rem !important;
		}

		.inpu {
			vertical-align: top !important;
			margin-top: 0.2rem !important;
		}

		.chartTime {
			left: 60% !important;
			line-height: 1.6rem !important;
		}

		.btn {
			width: 1.5rem !important;
		}



		.inpu {
			width: 5rem !important;
			height: 0.7rem !important;
			line-height: 0.7rem !important;
			padding: 1px !important;
		}

		.inpu /deep/ .el-input__inner {
			padding: 0;
			font-size: 0.2rem !important;
			width: 5rem !important;
			height: 0.7rem !important;
			line-height: 0.7rem !important;
			/* transform: translateY(-0.1rem); */
			padding: 1px !important;

		}

		.viewInput /deep/ .el-input__inner {
			transform: translateY(-0.1rem) !important;
		}

		.optionTree /deep/ .el-tree-node .el-tree-node__content .el-tree-node__label {
			font-size: 0.25rem !important;
		}
	}

	@media all and (max-width:1280px) {
		.inpu {
			max-width: 5rem !important;
			height: 0.7rem !important;
			line-height: 0.7rem !important;
			padding: 1px !important;
		}

		.inpu /deep/ .el-input__inner {
			padding: 0;
			font-size: 0.2rem !important;
			max-width: 5rem !important;
			height: 0.7rem !important;
			line-height: 0.7rem !important;
			/* transform: translateY(-0.1rem); */
			padding: 1px !important;

		}

		.newAll {
			height: 0.9rem !important;
			line-height: 0.9rem !important;
			font-size: 0.35rem !important;
		}

	}

	/* #page {
		position: relative;
		width: 99.4%;
		height:100vh;
		margin: 0 auto;

		overflow: hidden;
	} */

	.optionTree,
	.optionTreeHidden {
		float: left;
		width: 15.2%;
		height: calc(100% - 0.1rem);
		position: relative;
		z-index: 1;
		transition: all 1s linear;
		/* padding-top: 0.1rem; */
		overflow: auto;
		margin-top: 0.1rem;
		border: 2px solid #ccc;
		/*14.6rem*/
		/* border:1px solid red; */
		/* padding:0.2rem; */
	}

	.optionTreeHidden {
		/* float:none; */
		margin: 0;
		padding: 0;
		width: 0;
		/* height:0; */
		overflow: hidden;
		border: none;
	}

	.treeHead {
		width: 100%;
		height: 0.8rem;
		background-color: #f5f7fA;
		line-height: 0.8rem;
		font-size: 0.35rem;
		text-align: left;
		text-indent: 0.2rem;
		border-bottom: 1px solid #eee;
		margin-bottom: 0.1rem;
	}

	.treeIcon {
		/* position:absolute;
		top:0.1rem;
		right:0.1rem; */
		float: right;
		vertical-align: middle;
		margin: 0.15rem 0.1rem 0 0;
		color: #409eff;
		font-size: 0.5rem;
		/* transition:1s all linear;
		transform-origin:0.25rem 0.25rem!important; */
	}

	.treeIcon:hover,
	.el-icon-right:hover,
	.el-icon-back:hover {
		color: deepskyblue !important;
	}

	.optionTree /deep/ .el-tree-node .el-tree-node__expand-icon {
		color: #409eff !important;
		font-size: 0.3rem;
	}

	.optionTree /deep/ .el-tree-node .el-tree-node__content {
		padding-left: 2px !important;
		height: 34px;
		line-height: 34px;
		border-bottom: 1px dashed #ccc;
		width: 103% !important;

	}

	.optionTree /deep/ .el-tree-node .el-tree-node__content .el-tree-node__label {
		font-size: 0.32rem;
		margin-left: -4px;
		font-weight: normal;
	}

	.mainRight,
	.mainRightFull {
		float: right;
		width: 84.5%;
		height: calc(100% - 0.1rem);
		position: relative;
		z-index: 1;
		margin-top: 0.1rem;
		transition: all 1s linear;
		/*14.6rem*/
		border: 1px solid #ccc;
	}

	.mainRightFull {
		float: left;
		width: 100%;
	}

	.tabsOption {
		position: relative;
		z-index: 1;
		box-shadow: none !important;
		height: 100%;
	}

	.tabsOption /deep/ .el-tabs__header {
		height: 0.8rem !important;
		line-height: 0.8rem !important;
		padding: 0;
		padding-left: 0.8rem;
	}

	.tabsOption /deep/ .el-tabs__content {
		padding: 0 6px !important;
	}

	.tabsOption /deep/ .el-tabs__nav-scroll {
		height: 0.8rem !important;
		line-height: 0.8rem !important;
	}

	.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav {
		height: 0.8rem !important;
		line-height: 0.8rem !important;
	}

	.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
		height: calc(0.8rem + 2px) !important;
		line-height: 0.8rem !important;
		vertical-align: top !important;
		font-size: 0.35rem;
		width: 2.4rem !important;
		padding: 0 6px !important;
		text-align: center;
		/* padding-top:0; */
		/* font-family: "黑体"; */
		font-weight: 700;
		color: #222;
		z-index: 1;
		/* border:1px solid red; */
		/* margin-top: 1px; */
	}

	/* .tabsOption /deep/ .el-tabs__nav .el-tabs__item:first-child{
		padding-left:1.2rem!important;
	} */

	.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .is-active {
		color: #409eff;

	}

	.oneDeviceSeclt /deep/ .el-input__inner {
		padding-left: 4px;
		padding-right: 4px !important;
		height: 0.6rem;
		line-height: 0.6rem;
	}

	.deviceTabActive {
		color: #409eff;
	}

	.inpu {
		width: 5rem !important;
	}

	.inpu /deep/ .el-input__inner {
		width: 5rem !important;
		padding-left: 4px;
		padding-right: 4px !important;

	}

	.searchForm .inpu /deep/ .el-input__inner {
		width: 3rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-input {
		width: 3rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-select {
		width: 3rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm .mapDevice {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm .mapDevice /deep/ .el-input__inner {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm .mapDevice /deep/ .el-input {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm .mapDevice /deep/ .el-select {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-range-input {
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-range-separator {
		color: #fff !important;
	}

	.mapOption {
		padding: 0 4px !important;
	}

	.deviceData,
	.analysisData {
		/* margin-top: 0.1rem; */
		width: 100%;
		/* min-height: 1rem; */
		overflow: auto;
		transition: all 1s linear;
		/* border: 1px solid red; */
	}

	.deviceData{
	    height:calc(100vh - 2.35rem)!important;
      /* border:1px solid red; */
	}

	.analysisData {
		height:calc(100vh - 3.6rem);
    /* border:1px solid red; */
	}

	.oneDevice {
		width: 100%;
		min-height: 1rem;
		/* margin-top:0.2rem; */
		/* border-bottom: 2px solid #ccc; */
		/* background-color: #f2f2f2; */
	}

	.oneDevice:first-child {
		margin-top: 0.25rem;
	}

	.head_form /deep/ .el-form-item {
		margin-bottom: 2PX
	}

	.optionTree /deep/ .el-tree__empty-text {
		font-size: 0.35rem;
	}

	#content,
	#productImage {
		width: 99.9%;
		overflow: hidden;
		/* transition:all 500s linear; */
		/* height: 16.8rem; */
    height:calc(100vh - 1.45rem)!important;
		/* position:absolute; */
		margin: 0 auto;
		margin-top: 0.2rem;
		/* margin-left:0.2rem; */
		padding: 0;
		/* border:1px solid red; */
	}


	.mapbtn {
		display: inline-block;
		position: fixed;
		bottom: 0.6rem;
		right: 0.5rem;
		width: 1.4rem;
		height: 0.6rem;
		font-size: 0.3rem;
		line-height: 0.5rem;
		z-index: 10000;
		color: white;
		background-color: forestgreen;
		border-radius: 4px;
	}

	.mapbtn:hover {
		background-color: limegreen;
	}


	.fram {
		float: left;
		margin-top: 0.15rem;
		width: 100%;
		/* min-height:710px; */
		height:calc(100vh - 2.55rem)!important;
		overflow: auto;
		position: relative;
		z-index: 1;
		padding: 0 !important;

		/* border:1px solid red; */

	}

	.fram_2 {
		margin-top: 0.15rem;
		padding: 0 !important;
	}

	#mainIframe {
    transition: all 500ms linear;
    -moz-transition:all 500ms linear;
    -ms-transition:all 500ms linear;
    -webkit-transition: all 500ms linear;
		/* transition: all 500ms linear; */
	}

	.viewBox {
		min-width: 200px;
		font-size: 0.35rem;
		color: white;
		position: fixed;
		top: 0.9rem;
		right: 0.3rem;
		height: auto;
		/* transition:all 500ms linear; */
		z-index: 10000;
	}

	.oneView {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-top: 0.2rem;
		background-color: rgba(0, 0, 0, 0.3);
		cursor: pointer;
		/*deepskyblue透明度0.5*/
		/* background-color:rgba(0,191,255,1); */
		border-radius: 4px;
		padding: 0 0.2rem;
	}

	.active_2 {
		color: deepskyblue;
		background-color: rgba(0, 0, 0, 0.6);
		border: 1px solid deepskyblue;
	}

	.viewbtn_2 {
		display: flex;
		/* display: inline-block; */
		position: fixed;
		height: 0.6rem;
		top: 0.3rem;
		right: 0.3rem;
		z-index: 10000;
		background-color: rgba(0, 0, 0, 0.3) !important;
		border: none;
		padding: 0.1rem;
		max-width: 5rem;
		justify-content: space-between;
		align-items: center;
		border-radius: 4px;
	}

	.viewbtn_2 img {
		width: 0.4rem;
		height: 0.4rem;
		cursor: pointer;
	}

	.viewbtn_2 i {
		color: #fff;
		font-size: 0.45rem;
		margin-left: 0.15rem;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
	}

	.viewbtn_2 span {
		display: inline-block;
		width: auto;
		margin-left: 0.3rem;
		color: #eee;
		font-weight: 700;
		font-size: 0.35rem;
	}

	.big>>>.el-popper[x-placement^=bottom] {
		margin-top: 8px;
		background-color: red !important;
	}

	.dial>>>.el-dialog__body {
		/*曲线对话框的背景色*/
		/* background: -webkit-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -moz-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -ms-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: -o-linear-gradient(to bottom, #0b2c51 20%, #bbb 100%);
		background: linear-gradient(to bottom, #0b2c51 20%, #bbb 100%); */
		/* background-color: #0b2c51; */
		padding: 10px;
	}

	.dial>>>.el-dialog__header {
		position: relative;
		z-index: 99;
		width: 90%;
		height: 0.8rem;
		background-color: transparent !important;
	}

	.container_table>>>.el-radio__label {
		color: #fff;
		padding-left: 4px;
		font-size: 14px;
	}

	.container_table>>>.el-radio {
		margin-right: 0;
	}

	.container_table>>>.el-switch__label--right {
		right: 70px !important;
	}

	.container_table>>>.el-switch__label--left {
		left: 70px !important;
	}

	.green {
		color: green;
	}

	.pagination {
		margin-top: 0.2rem;
	}

	.bottom_top {
		position: relative;
		/* margin: 0.1rem auto; */
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		/* padding-right: 0.2rem; */
		/* background-color:transparent; */
		color: white;
		margin: 0 auto;
		/* background-color:#409eff; */
		background-color: #0e6db0 !important;
		/* background:radial-gradient(circle, #409eff 40%,#0e6db0); */
		/* background:linear-gradient(to bottom,#0e6db0 ,#409eff 50%,#0e6db0); */
		/* border-bottom:1px solid #ccc; */
		/* padding:0 0.15rem; */
		/* background-color: rgba(0, 0, 0, 0.2); */
		/* background-color: rgba(17, 17, 17, 0.5); */
		/*约等于#111透明0.5*/
		/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
		box-shadow: 0px 0px 10px 5px #ccc;
	}

	.bottom_top:after {
		content: '.';
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}

	.bottom_top_left {
		float: left;
		min-width: 36%;
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: left;
		padding: 0 0.1rem;
		padding-right: 0.5rem;
		font-size: 0.3rem;
		color: white;
		background-color: transparent !important;
		/* background-color:rgba(0,200,255,1); */
		/* background-color:#4671d5; */
		/* background-color:#409eff; */
	}

	.pointName {
		float: left;
		color: #fff;
		/*#eef*/
		font-size: 0.4rem;
		margin-right: 4px;
		margin-top: 0.25rem;
		vertical-align: middle;
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5) !important;
	}

	.slave_top {
		min-width: 15%;
		height: 0.5rem;
		line-height: 0.5rem;
		margin-top: 2px;
		text-align: left;
		padding: 0 0.1rem;
		font-size: 0.3rem;
		color: #0e6db0;
		/* font-size:0.32rem; */
		font-weight: 700;
		/* border-bottom: 2px dotted #ccc; */
		/* text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important; */
		/* background-color:rgba(0,0,0,0.1); */
	}

	.bottom_top_right {
		float: left;
		width: auto;
		text-align: left;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-left: 0.4rem;
		color: #222;
	}

	.oneDeviceName {
		float: left;
		/* display:inline-block; */
		text-align: left;
		/* font-family:"黑体"; */
		width: 5.2rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.34rem;
		font-weight: 900;
		color: #fff;
		/*#eef*/
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5) !important;
	}

	.bottom_top .inpu /deep/ .el-input__inner::-webkit-input-placeholder {
		color: #fff !important;
		font-size: 0.3rem !important;

	}

	.bottom_top .inpu /deep/ .el-input__inner:-moz-placeholder {
		color: #fff !important;
		font-size: 0.3rem !important;
	}

	.bottom_top .inpu /deep/ .el-input__inner::-moz-placeholder {
		color: #fff !important;
		font-size: 0.3rem !important;
	}

	.bottom_top .inpu /deep/ .el-input__inner:-ms-input-placeholder {
		color: #fff !important;
		font-size: 0.3rem !important;
	}

	.bottom_top .out .el-input__inner {
		height: 0.6rem !important;
		line-height: 0.6rem !important;
	}

	#historyData,
	#live {
		float: left;
		width: 1.8rem;
		text-align: center;
		height: 0.8rem;
		cursor: pointer;
		line-height: 0.8rem;
		font-size: 0.3rem;
		/* border: 1px solid deepskyblue; */
		/* background-color: #B7873C; */
	}

	.chartTime {
		position: absolute;
		top: 1.1rem;
		left: 70%;
		z-index: 10;
		color: white;
	}

	.imgbig {
		width: 100%;
		height: 5.95rem;
		position: relative;
		background-color: rgba(17, 17, 17, 0.5);
		z-index: -1;
	}

	.imgtit {
		width: 2rem;
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
		position: absolute;
		font-size: 0.35rem;
		color: deepskyblue;
		font-weight: 600;
		/* font-family: "楷体"; */
		left: 0;
		top: 0;
	}

	#isfull {
		width: 99.5%;
		/* padding:0; */
		/* max-height:12rem; */
		/* min-height: 1.4rem; */
		height: auto;
		text-align: center;
		/* background-color: transparent; */
		margin: 0 auto;
		padding: 0.1rem 0;
		/* overflow-y:visible; */
		/* overflow-x:hidden; */
		/* padding-bottom: 0; */
		/* border:1px solid red; */
		/* border:1px solid red; */
	}

	.container_table,
	.analysis_echart {
		width: 100%;
		height: auto;
		margin: 0 auto;
		margin-top: 0.1rem;
		background-color: transparent;
	}

	.formline,
	.tip {
		display: block;
		text-align: center;
		/* padding-left:0.4rem; */
		margin: 0 auto;
		font-size: 0.35rem !important;
		box-sizing: border-box;
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;
		/*border:1px solid red;*/
	}

	.inpu {
		width: 5rem;
		height: 0.8rem;
		color: white !important;
		background-color: transparent !important;
		vertical-align: middle;
		/* border:1px solid red; */
	}

	.analysis {
		width: 4.5rem !important;
	}

	.analysis /deep/ .el-input__inner {
		width: 4.5rem !important;
	}

	.method {
		width: 3rem !important;
	}

	.method /deep/ .el-input__inner {
		width: 3rem !important;
	}

	#myChart {
		min-width: 90%;
		height: 400px;
		margin: 0 auto;
		margin-top: 1.5rem;
		padding: 0 !important;
	}

	#historyChart,
	#analysisChart,
	#analysisBar{
		width: 100%;
		height:100%;
		overflow: hidden;
	}

	.chartTip {
		position: absolute;
		top: 4px;
		left: 10px;
		z-index: 2;
		font-size: 0.25rem;
		color: #aaa;
	}

	.methodSelsct {
		position: absolute;
		top: 6px;
		right: 150px;
		z-index: 2;
		font-size: 0.3rem;
		color: #111;
	}

	/* newAll只用于导出按钮  */
	.btn,
	.newAll {
		box-sizing: border-box;
		display: inline-block;
		padding: 0 !important;
		width: 1.2rem;
		padding: 0;
		height: 0.55rem;
		text-align: center;
		font-size: 0.25rem;
		line-height: 0.55rem;
		/* border: 1px solid #ccc; */
		vertical-align: middle;
		background-color: transparent;
		color: #222;
		/* margin-top: 0.1rem; */
	}

	.btn:hover {
		border: none;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.4);
		box-shadow: 0px 0px 10px 5px inset rgba(0, 0, 0, 0.8);
	}

	.newAll {
		height: 0.55rem;
		min-width: 1rem;
		line-height: 0.55rem;
		background-color: #409eff;
		border-radius: 4px;
		text-decoration: none;
		;
		box-shadow: none;
	}

	.newAll:hover {
		border: none;
		background-color: #661ff !important;
		/* color: deepskyblue; */
		box-shadow: 0px 0px 10px 5px inset #66b1ff;
	}

	#myChart,
	#myChartLive,
	#powerChartLive,
	#without {
		min-width: 80%;
		height: 420px;
		margin: 0 auto;
		margin-top: 10px;
		padding: 0 !important;
		background-color: transparent;
		/* border:1px solid red; */
		/* box-shadow: 0px 0px 10px 5px inset deepskyblue; */
	}

	#powerChartLive {
		/* border:1px solid red; */
		min-width: 1000px;
		width: 1000px;
		height: 500px;
	}

	#without {
		line-height: 450px;
		text-align: center;
		font-size: 0.3rem;
	}

	.tophid {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: left;
		background-color: rgba(17, 17, 17, 0.5);
		position: absolute;
		font-size: 0.3rem;
		top: 0;
		left: 0;
		z-index: 999;
		padding: 0 0.2rem !important;
	}

	.back {
		float: right;
		width: 1rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.3rem;
		text-align: right;
		/* border:1px solid red; */
	}

	.cardActive {
		/* #3795ff */
		background-color: deepskyblue;
		cursor: default;
	}

	p {
		line-height: 0.5rem;
	}

	.devStatus {
		width: 20%;
		float: right;
		font-size: 0.35rem;
		line-height: 0.8rem;
		text-align: right;
		padding-right: 0.4rem;
	}

	/* .pagination>>>.el-input__inner {
		font-size: 12px !important;
	} */

	.container_table>>>.el-table--small td {
		padding: 4px 0;
	}

	.container_table>>>.el-table--small th {
		padding: 6px 0;
	}

	.container_table>>>.el-table .cell,
	.el-table th div {
		padding-left: 2px;
		padding-right: 2px;
	}

	.container_table>>>.el-table__footer {
		font-size: 0.3rem !important;
		font-weight: 700;
	}

	#cameraData {
		display: flex;
		flex: auto;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		overflow: auto;
    margin-top:0.2rem;
		/* min-height: 1rem; */
		height:calc(100vh - 1.45rem)!important;

	}

	.cameraBox {
		width: 40%;
		height: 420px;
		/* border:1px solid red; */
	}

	.head_video,
	.head_video_2 {
		display: inline-block;
		width: 100%;
		height: 360px;
		line-height: 360px;
		position: relative;
		box-sizing: border-box;
		z-index: 1;
		/* padding: 1px;
		width: 420px; */
		padding: 0;
		font-size: 14px;
		/* line-height: 1rem; */
		background-color: #000;
	}

	.head_video_2 {
		height: 420px !important;
	}

	.camera {
		/* position: absolute;
		bottom: -1rem; */
		font-size: 0.3rem;
		text-align: left;
		right: 0;
		color: #222;
		height: 0.8rem;
		line-height: 0.8rem;
		margin: 0.1rem 0;
		border-bottom: 2px solid #ccc;
		/* z-index: 999; */
		/* background-color:rgba(0,0,0,0.6); */
		/* box-shadow:0 0 6px #111; */
	}

	.camera>>>.el-input__inner {
		/* background-color: #0b2c51;
		color: #fff; */
		height: 0.6rem;
		line-height: 0.6rem;
	}

	.send>>>.el-input__inner {
		height: 0.7rem !important;
		line-height: 0.7rem !important;
	}

	.oneOption:hover {
		background-color: #eee !important;
	}

	.oneOption {
		background-color: transparent !important;
	}

	#goback {
		margin-left: 0.2rem;
		float: left;
		/* vertical-align: middle; */
		margin-top: 0.1rem;
	}

	.formline>>>.el-input__inner {
		width: 5.5rem;
	}

	.slave {
		width: 5.2rem !important;
	}

	.formline>>>.slave .el-input__inner {
		width: 5.2rem !important;
	}

	.sendOut {
		font-size: 0.35rem;
		float: right;
		margin-right: 0.2rem;
	}

	.timeBox {
		font-size: 0.3rem;
		width: 90%;
		height: 1rem;
		line-height: 1rem;
		margin-top: 0.2rem;
		margin-left: 0.4rem;
	}

	.timebtn {
		width: 1.5rem;
		height: 0.6rem;
		padding: 0;
		text-align: center;
		line-height: 0.6rem;
	}

	.allExpand {
		float: right;
		width: 0.7rem;
		height: 0.7rem;
		line-height: 0.7rem;
		background-color: #eee;
		color: #0e6db0;
		font-size: 0.5rem;
		padding: 0;
		margin-top: 0.1rem;
		margin-right: 0.1rem;
	}

	.rightIcon {
		float: right;
		max-width: 1.8rem;
		min-width: 1.2rem;
		display: flex;
		justify-content: space-between;
		height: 0.6rem;
		line-height: 0.6rem;
		background-color: #eee;
		color: #0e6db0;
		margin-top: 0.1rem;
		font-size: 0.35rem;
		margin-left: 0.2rem;
		border-radius: 4px;
		padding: 0;
	}

	.oneExpand {
		text-align: center;
		margin: 0;
		/* float:right; */
		width: 0.6rem;
		height: 0.6rem;
		line-height: 0.6rem;
		background-color: transparent;
		color: #0e6db0;
		border: none;
		border-radius: 0;
		/* margin-top:0.1rem; */
		font-size: 0.4rem;
		/* padding:0; */
		/* margin-left:0.2rem; */
		padding: 0;
	}

	.oneExpand+.oneExpand {
		border-left: 1px solid #bbb;
		margin-left: 0 !important;
	}

	.oneExpand:hover {
		color: #409eff;
		/* border:1px solid #409eff; */
	}

	.search {
		width: auto;
		height: 1rem;
		line-height: 1rem;
		border-radius: 6px;
		position: absolute;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0.2rem;
		left: 0.2rem;
		z-index: 100;
	}

	.searchForm {
		display: inline-block;
		text-align: left;
		height: 0.8rem;
		line-height: 0.8rem;
		vertical-align: middle;
		margin-top: 4px;
		width: auto;
		float: left;
		background-color: transparent;
		/* border:1px solid green; */
	}

	.chaxu {
		color: white;
		font-size: 0.3rem;
	}

	.topNewMenu {
		display: flex;
		justify-content: flex-start;
		position: absolute;
		margin: 0;
		width: 100%;
		top: 0;
		left: 0;
		/* border:1px  solid red; */
		z-index: 2;
		text-align: left;
		height: calc(0.8rem + 1px);
		line-height: 0.8rem;
		padding-right: 0.2rem;
		padding-left: 0.8rem;
		background-color: #f5f7fa;
		border: 1px solid #DCDFE6;
		/* border-bottom:none; */
		/*约等于#111透明0.5*/
		/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
	}

	.oneMenu {
		height: 0.8rem !important;
		line-height: 0.8rem !important;
		vertical-align: top !important;
		font-size: 0.35rem;
		width: 2.4rem !important;
		padding: 0 6px !important;
		text-align: center;
		cursor: pointer;
		/* padding-top:0; */
		/* font-family: "黑体"; */
		font-weight: 700;
		color: #222;
		z-index: 2;
		/* border:1px solid red; */
		/* margin-top: 1px; */
	}

	.menuActive {
		color: #409eff;
		/* cursor:default; */
		background-color: #fff;
		border-left: 1px solid #DCDFE6;
		border-right: 1px solid #DCDFE6;
		height: calc(0.8rem + 2px) !important;
	}

	.swiperInput /deep/ .el-input__inner {
		padding-right: 0;
	}

	/* .photoBox{
		width:100%;
		min-height:4.5rem;
		max-height:9rem;
		margin-top:0.2rem;
		display:flex;
		flex-wrap: wrap;
		justify-content:flex-start;
	    align-items:center;
		overflow: auto;
		border:1px solid #ccc;
	} */

	.photoBox{
		width:100%;
		/* height:auto; */
		min-height:4.2rem;
		max-height:8.35rem;
		margin-top:0.2rem;
		padding:0.1rem;
		display:grid;
		display:-webkit-grid;
		display:-moz-grid;
		display:-ms-grid;
		grid-gap:0.1rem;
		/* auto-fit表示自适应列数，也可以是规定具体数值， */
		/* minmax(列宽的最小值，列宽的最大值)设置列宽区间值，也可以是具体值 */
		/* grid-template-columns: repeat(4,minmax(4.5rem,1fr)); */
		grid-template-columns: repeat(auto-fit, minmax(4.5rem,1fr));
		/* 2表示最多支持的行数，200px表示行高，如果小于6，超出的的行的行高和项目(如果没有设置高度)的高度将不受控制 */
		/* 行数不够会自动撑开 */
		/* grid-template-rows: repeat(2, 4rem); */
		grid-template-rows: repeat(1, 4rem)!important;
		overflow: auto;
		border:1px solid #ccc;
	}

	.onePhoto{
		/* width:5rem;
		height:4rem; */
		position:relative;
		/* margin:0.1rem; */
		/* border:1px solid red; */
	}

	.onePhoto>.oneImg{
		display:block;
		cursor:pointer;
		width:100%;
		/* height:calc(5rem - 40px); */
		height:100%;
	}

	.photoBottom{
		width:100%;
		height:28px;
		line-height:28px;
		padding-left:0.1rem;
		font-size:0.24rem;
		color:#fff;
		position:absolute;
		bottom:0;
		left:0;
		background-color:transparent;
		/* border:1px solid blue; */
	}

	.delIcon{
		float:right;
		color:red;
		width:0.5rem;
		height:0.5rem;
		line-height:0.5rem;
		text-align:center;
		cursor:pointer;
		font-size:0.4rem;
		opacity: 0.7;
	}

	.delIcon:hover{
	   opacity:1;
	}

	.bigPhotoBox{
		width:100%;
		height:620px;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		z-index:1;
    }

	.bigPhotoBox>img{
		width:100%;
		height:620px;
	}

	.bigClose{
		width:0.5rem;
		height:0.5rem;
		line-height:0.5rem;
		background-color: rgba(0,0,0,0.5);
		border-radius: 50%;
		text-align:center;
		font-size:0.4rem;
		color:#fff;
		cursor:pointer;
		position:absolute;
		top:-0.5rem;
		right:-0.5rem;
		z-index:2;
	}

	/* .nowEquip{
		display:inline-block;
		width:auto;
		text-align:left;
		font-size:0.3rem;
	} */
</style>
